/* tokens.css: de enige bron voor kleur, type, ruimte, vorm, lagen en beweging.
   JS leest de bewegingstokens hieruit (core.js, Motion.tokens). Wijzig waarden hier en leg ze vast in DESIGN.md.
   Contrast: `node tools/checks/contrast.mjs` leest de hexwaarden uit dit bestand (houd ze als "--naam: #HEX;"). */

:root {
  color-scheme: light;

  /* Kleur: een papier, een inkt, een signaalkleur (DESIGN.md, aanpassing 2026-10-07 voor AA) */
  --papier: #EEEAE2;
  --papier-2: #E3DED3;
  --inkt: #15130F;
  --inkt-2: #2B2823;
  --gedempt: #5B564C;         /* secundaire tekst op papier en papier-2 */
  --gedempt-inkt: #A39C90;    /* secundaire tekst op inkt en inkt-2 */
  --accent: #E93C10;          /* signaalkleur: vlakken, cursor, ring, grote tekst. Niet voor kleine tekst op papier */
  --accent-tekst: #B52A08;    /* accent voor kleine tekst op papier (minstens 4,5 op papier en papier-2) */
  --lijn: rgb(21 19 15 / 0.2);
  --lijn-inkt: rgb(238 234 226 / 0.2);

  /* Semantische laag: de donkere sectie en het menu zetten deze om met .is-inkt */
  --bg: var(--papier);
  --bg-2: var(--papier-2);
  --fg: var(--inkt);
  --fg-dim: var(--gedempt);
  --lijn-fg: var(--lijn);
  --accent-lees: var(--accent-tekst);

  /* Lettertypen (fonts.css levert de faces en de metrische fallbacks) */
  --f-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", Arial, sans-serif;
  --f-tekst: "Hanken Grotesk", "Hanken Grotesk Fallback", Arial, sans-serif;
  --f-mono: "DM Mono", "DM Mono Fallback", "Courier New", monospace;

  /* Typeschaal (fluide; het langste woord past op 320 px: 13 tekens in 40 px display) */
  --fs-hero: clamp(3.5rem, 0.2rem + 17.5vw, 16rem);   /* met een kleine rem-component: groeit mee met de tekstgrootte (F94); onder 600 px zie hieronder */
  --fs-h1: clamp(2.5rem, 0.6rem + 8.4vw, 9rem);
  --fs-h2: clamp(2rem, 0.6rem + 5.2vw, 6rem);
  --fs-h3: clamp(1.5rem, 1.05rem + 1.5vw, 2.5rem);
  --fs-lead: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem);
  --fs-body: clamp(1rem, 0.91rem + 0.35vw, 1.1875rem);
  --fs-klein: 0.875rem;
  --fs-mono: 0.75rem;
  --fs-mono-s: 0.6875rem;                       /* op een telefoon 12 px, zie onderaan (D36) */
  --fs-menu: clamp(2.25rem, 16vw, 10rem);        /* weergavematen buiten de koppenschaal: menulinks, gordijnlabel, preloader, teller */
  --fs-gordijn: clamp(3.25rem, 13vw, 12rem);
  --fs-preloader: clamp(3.5rem, 17vw, 16rem);
  --fs-teller: clamp(1.75rem, 5vw, 4.5rem);
  --lh-display: 0.92;
  --lh-kop: 1;
  --lh-tekst: 1.55;

  /* Spacing (4, 8, 12, 16, 24, 32, 48, 64, 96, 160 px) */
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-48: 3rem;
  --s-64: 4rem;
  --s-96: 6rem;
  --s-160: 10rem;
  --sectie: clamp(6rem, 14vw, 10rem);   /* verticale adem boven en onder een gewone sectie */

  /* Raster */
  --rand: clamp(16px, 4vw, 48px);
  --goot: clamp(12px, 1.6vw, 24px);
  --max: 110rem;
  --header-min: 4.5rem;       /* minimale hoogte van de header; hij groeit mee als hij moet afbreken (grotere tekst, smal scherm) */
  --header-h: var(--header-min);   /* de gemeten hoogte: chrome.js zet hem inline over zodra de header hoger is dan het minimum */

  /* Vormtaal: bediening is een pil, vlakken zijn recht met een kleine radius */
  --r-bediening: 999px;
  --r-vlak: 0.5rem;
  --r-open: 2rem;             /* beginradius van het opengaande vlak */
  --masker-marge: 0.14em;     /* overflow-clip-margin van de maskers: uitlopers en accenten blijven heel */
  --haar: 1px;

  /* Focus: 3 px, minstens 3:1 op papier en inkt */
  --focus-breedte: 3px;
  --focus-afstand: 3px;

  /* Lagen: alleen systeemlagen. Lokale lagen gebruiken isolation: isolate en DOM-volgorde */
  --z-hud: 20;
  --z-menu: 30;
  --z-header: 40;
  --z-voortgang: 50;
  --z-gordijn: 100;
  --z-cursor: 110;
  --z-skiplink: 120;

  /* Beweging. CSS is de bron, JS leest ze uit. GSAP: power4.out, expo.out, CustomEase uiInOut en uiDrawer */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-snel: 140ms;
  --t-middel: 500ms;
  --t-traag: 1000ms;
  --split-hide: 125;          /* yPercent waarmee een gemaskeerde regel of teken verdwijnt (zie base.css, .split-line-mask) */
  --m: 1;                     /* bewegingsfactor: 0 bij prefers-reduced-motion en bij "Beweging uit". Vermenigvuldig duren van beweging ermee */
}

@media (max-width: 599px) {
  :root { --fs-mono-s: 0.75rem; }             /* labels met inhoud (DM Mono, hoofdletters met letterspatiering) niet kleiner dan 12 px op een telefoon (D36) */
  :root { --fs-hero: calc(0.1rem + 19vw); }   /* "Beweging" is 4,05 tot 4,3 em breed (de optische as maakt kleine maten breder); met scrollbalkgoot (15 px) past het op 320 px */
}
@media (prefers-reduced-motion: reduce) {
  :root { --m: 0; }
}

:root.motion-off,
:root.motion-failed {
  --m: 0;
}

/* Donkere context (sectie, menu, voettekst, de header bij een open menu): een plek voor de semantische laag */
.is-inkt,
.menu,
html.menu-open .site-header {
  --bg: var(--inkt);
  --bg-2: var(--inkt-2);
  --fg: var(--papier);
  --fg-dim: var(--gedempt-inkt);
  --lijn-fg: var(--lijn-inkt);
  --accent-lees: var(--accent);
}
.is-inkt {
  background-color: var(--bg);
  color: var(--fg);
}