/* BEWAAR — designtokens. Enige bron van waarheid, recht uit het merkboek.
   Wijzig hier, nergens anders. */

:root {
  /* ---- Kleur ---------------------------------------------------------
     Verhouding ~70% neutraal / 25% inkt / 5% rood.
     Rood komt EEN keer per scherm voor: knop, prijs of kader.        */
  --rood:        #EC3013;   /* merkrood — grafisch vlak: logo, bullets, lijnen, greep */
  --rood-vlak:   #E02909;   /* zelfde rood, iets dieper: ALLEEN waar witte tekst op staat.
                               #EC3013 met wit is 4,2:1 en haalt WCAG AA niet onder 18,7px
                               (het merkboek noteert dat zelf ook). Dit haalt 4,7:1.
                               Visueel vrijwel niet te onderscheiden. */
  --rood-tekst:  #AE1800;   /* rode tekst op neutraal — wel toegankelijk    */
  --rood-diep:   #C22608;   /* hover                                        */
  --inkt:        #201E1D;   /* tekst, lijnen, header, footer, logo          */
  --inkt-zacht:  #55514F;   /* secundaire tekst (7,4:1 op grond)            */
  --grond:       #F3F2F2;   /* pagina-ondergrond                            */
  --veld:        #EAE9E9;   /* vlakken en formuliervelden                   */
  --wit:         #FFFFFF;   /* productkaart                                 */
  --lijn:        #D6D3D1;   /* hairline                                     */
  --lijn-sterk:  var(--inkt);
  --succes:      #1B7A3D;

  /* ---- Typografie ---------------------------------------------------- */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-h1:    clamp(2.125rem, 7.2vw, 3.5rem);   /* 34 -> 56 */
  --t-h2:    clamp(1.625rem, 4.4vw, 2.125rem); /* 26 -> 34 */
  --t-h3:    clamp(1.25rem, 2.6vw, 1.5rem);    /* 20 -> 24 */
  --t-body:  clamp(1rem, 1.4vw, 1.125rem);     /* 16 -> 18 */
  --t-klein: 0.875rem;
  --t-label: 0.75rem;

  --lh-h1: 0.965;   /* 54/56 */
  --lh-h2: 1.12;    /* 38/34 */
  --lh-body: 1.556; /* 28/18 */

  --ls-h1: -0.03em;
  --ls-h2: -0.02em;
  --ls-merk: -0.01em;
  --ls-label: 0.08em;  /* kapitale labels mogen als enige losser */

  /* ---- Ruimte (4px-raster) ------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --sectie:    clamp(3rem, 8vw, 6rem);   /* verticale sectieruimte */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      78rem;   /* 1248px */
  --maxw-tekst: 38rem;  /* leesbreedte */

  /* ---- Vorm ----------------------------------------------------------
     Geen ronde hoeken. Dit is merkregel, geen smaak.                 */
  --radius: 0;
  --rand: 1px solid var(--lijn);
  --rand-inkt: 2px solid var(--inkt);

  --header-h: 60px;
  --balk-h: 34px;

  --overgang: 140ms ease-out;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

@media (min-width: 48rem) {
  :root { --header-h: 72px; --balk-h: 38px; }
}