/* tokens.css — de huisstijl van beeldsensatie.nl in variabelen.
   Dit bestand wordt als eerste ingeladen, ook op /bestellen/ en in /beheer/.
   Alle andere stylesheets verwijzen hiernaar; hier staan geen selectors. */

:root{
  /* Huisstijl-kleuren */
  --navy:#16234E;
  --navy-licht:#24356B;
  --koper:#AA5D28;
  --koper-diep:#8C4B1F;
  --paper:#F8F8FA;
  --paper-diep:#EDEEF2;
  /* Gedempte lopende tekst. Was #666E7C; dat haalde op --paper wel 4,84:1,
     maar op --paper-diep 4,43:1 — nét onder de 4,5:1 die WCAG AA voor lopende
     tekst vraagt. En juist op --paper-diep staat er veel van: .stap-tekst,
     .case-tekst, .review-citaat, .reviews-afsluiting, .case-meta dt en de
     kop van de domeintabel, verspreid over zes pagina's.
     #656D7A haalt 4,50:1 op --paper-diep en 4,92:1 op --paper. Dat zijn de
     enige twee ondergronden waarop dit token voorkomt; verandert dat, meet
     dan opnieuw. De donkerste variant is nadrukkelijk niet gekozen: dit is de
     kleinste stap die de grens haalt, zodat "gedempt" gedempt blijft. */
  --muted:#656D7A;
  --rand:#DFE1E7;

  /* Op navy ondergrond */
  --op-navy:#F8F8FA;
  --op-navy-zacht:rgba(248,248,250,0.78);
  --op-navy-rand:rgba(248,248,250,0.18);

  /* Typografie */
  --font:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Schaal (rem, zodat browserzoom werkt) */
  --maat-xs:0.75rem;    /* 12px eyebrow */
  --maat-s:0.875rem;    /* 14px */
  --maat-m:1rem;        /* 16px body */
  --maat-l:1.25rem;     /* 20px kaarttitel */
  --maat-xl:1.75rem;    /* 28px sectietitel */
  --maat-2xl:clamp(2.25rem,5.5vw,3.5rem); /* display */

  /* Vorm */
  --radius-knop:4px;
  --radius-kaart:10px;
  --radius-band:12px;

  --regel:65ch;
  --marge:clamp(1.25rem,4vw,3.5rem);
  --breedte:78rem;
}