/* =====================================================================
   MEET NOODLES — VUURPLAAT
   Fase 0: fundament (fonts, tokens, grond, koppen, kern-CTA + plugin-brug).
   Latere fases voegen header, productkaarten, winkelmand en checkout toe.
   Laadt na Divi en na de ordering-plugin (zie functions.php, prio 100).
   ===================================================================== */

/* ---------- 1. Fonts (lokaal, geen CDN) ---------- */
@font-face{
  font-family:'Bebas';
  src:url('../fonts/BebasNeue.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM';
  src:url('../fonts/DMSans.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- 2. Design tokens (uit het Vuurplaat-prototype) ---------- */
:root{
  --plaat:#E3DFD7;         /* paginagrond, warm pleister      */
  --kalk:#FAF8F3;          /* vlakken / kaarten               */
  --inkt:#0A0807;          /* tekst, bijna zwart              */
  --krijt:#FFFFFF;
  --vuur:#FC5000;          /* enige felle accent (CTA)        */
  --vuur-op:#FF6A22;       /* accent hover                    */
  --zwavel:#F5F28E;        /* labels / categorieën            */
  --stil:#5A534C;          /* gedempte tekst op licht         */
  --lijn:rgba(10,8,7,.20);
  --lijn-sterk:rgba(10,8,7,.55);
  --veer:cubic-bezier(.32,.72,0,1);
  --r-vlak:40px; --r-klein:24px; --r-mini:16px; --r-pil:999px;

  /* merkmerk: de logotegel houdt de ORIGINELE koraalkleur */
  --logo-vlak:#e95b40;
  --logo-teken:#ffffff;
}

/* ---------- 3. Brug naar de ordering-plugin ----------
   De plugin (mno-fulfillment / mno-modifiers) is variabele-gestuurd;
   we mappen zijn tokens op het Vuurplaat-systeem. Geen PHP nodig. */
:root{
  --mn-coral:var(--vuur);
  --mn-coral-hover:var(--vuur-op);
  --mn-ink:var(--inkt);
  --mn-cream:var(--kalk);
  --mn-radius:var(--r-mini);
}

/* ---------- 4. Grond en basistekst ---------- */
body{
  background:var(--plaat);
  color:var(--inkt);
  font-family:"DM",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p,li,td,th,.et_pb_text,.woocommerce,.woocommerce-page{
  font-family:"DM",ui-sans-serif,system-ui,sans-serif;
}
::selection{background:var(--vuur);color:var(--krijt);}

/* ---------- 5. Koppen in Bebas (display, hoofdletters) ---------- */
h1,h2,h3,h4,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4,
.et_pb_heading_container h1,.et_pb_heading_container h2,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
  font-family:"Bebas",Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
  font-weight:400;
}

/* ---------- 6. Links ---------- */
a{color:inherit;text-decoration-color:var(--lijn-sterk);}
a:hover{color:var(--vuur);}

/* ---------- 7. Kern-CTA (accent) ---------- */
/* WooCommerce-knoppen + Divi-knoppen naar het vuur-accent, volledige pil. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
button.single_add_to_cart_button,
.et_pb_button.mn-bestel{
  background:var(--vuur);
  color:var(--krijt);
  border:0;
  border-radius:var(--r-pil);
  padding:.85rem 1.6rem;
  font-family:"DM",sans-serif;
  font-weight:600;
  text-transform:none;
  transition:transform .5s var(--veer),background .3s var(--veer);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
button.single_add_to_cart_button:hover,
.et_pb_button.mn-bestel:hover{
  background:var(--vuur-op);
  color:var(--krijt);
  transform:translateY(-1px);
}

/* Prijzen krijgen het merkritme (nog rustig in fase 0). */
.woocommerce .price,.woocommerce div.product p.price{
  color:var(--inkt);
  font-weight:600;
}

/* ---------- 8. Ordering-plugin: typografische match ---------- */
.mno-modifiers,.mno-fulfillment{
  border-radius:var(--r-mini);
  border-color:var(--lijn);
}
.mno-modifiers h3,.mno-fulfillment h3,.mno-modifier-group legend{
  font-family:"Bebas",Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* =====================================================================
   ROADMAP — volgende fases (nog niet actief, hier als anker):
   Fase 1  Header (Theme Builder) + genesteld logo, footer
   Fase 2  Productkaart .woocommerce ul.products li.product  (kaart in --kalk,
           .r-vlak radius, prijs-pil, plus-knop; evt. content-product.php)
   Fase 3  Single-product lay-out + modifiers fijnafstemming
   Fase 4  Winkelmand + checkout skinning, mandteller in header
           (cart-fragments zijn NIET actief -> activeren of count-snippet)
   Fase 5  Statische pagina's: home-hero (halftoon), Over ons, Contact
   ===================================================================== */