/* ─────────────────────────────────────────────────────────────
   Plekk — canonieke design-tokens · versie 2.0.0 (2026-10-10)
   Bron-van-waarheid: docs/plekk-branding-guide.md §6 (kleur), §7 (typografie), §8 (beweging).
   De waarden komen uit de goedgekeurde proto (proto/proto.css, #103, #268); tests/tokens.test.mjs
   bewaakt dat dit bestand, plekk-tokens.json en de proto gelijk blijven.
   Gevendord read-only door plekk-cms (dashboard.plekk.studio). Wijzig hier, niet daar.
   Contract: docs/shared-supabase.md §11; briefing voor de CMS: docs/briefings/2026-10-10-cms-tokens-v2.md.

   Lettertype: Archivo, variabel (gewicht 100-900, breedte 62-125%), zelf gehost in /assets/fonts/
   (SIL Open Font License 1.1, zie assets/fonts/OFL.txt). Geen Google Fonts of Fontshare meer.
   Preload in <head> van elke pagina (de latin-subset dekt Nederlands):
     <link rel="preload" href="/assets/fonts/archivo-v25-latin.woff2" as="font" type="font/woff2" crossorigin>
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('/assets/fonts/archivo-v25-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('/assets/fonts/archivo-v25-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Fallback met de maten van Archivo 400, zodat de tekst niet verspringt als het lettertype binnenkomt.
   Gemeten in Chromium en WebKit op de tekst van de proto: Archivo 400 is 97,7% van Arial; ascent 878, descent 210 (op 1000). */
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('ArialMT');size-adjust:97.7%;ascent-override:89.87%;descent-override:21.49%;line-gap-override:0%}

/* ---------- kleur: grondtonen (§6.1) ---------- */
:root{
  --nacht:#121110; --nacht-2:#1C1B19; --nacht-fg:#F3F2EF; --nacht-fg-2:#A19D96; --nacht-line:#34322F;
  --bot:#F3F2EF; --bot-2:#E6E4DF; --inkt:#121110; --inkt-2:#5C5954; --line:#D5D2CC; --field:#85817A;
  --acc-licht:#B5410F; --acc-vlak:#E4531B; --acc-donker:#F2561D;   /* oranje: als tekst op licht, als vlak, op nacht */
  --m-hi:#F1F0EC; --m-1:#DCDBD6; --m-2:#C6C5C0; --m-3:#B3B2AD; --m-lo:#9E9D98; --m-ink:#22211E; --m-ink-2:#3F3D39;   /* mist (hero) */
  /* materiaal (§6.4): zilver alleen voor het blokje op nacht en het randlicht, staal alleen voor het kader op nacht */
  --zilver:linear-gradient(135deg,#EEF1F4 0%,#9AA5B1 42%,#D3D9DF 56%,#6E7985 100%);
  --staal:linear-gradient(180deg,#D2D8DE 0%,#99A3AE 38%,#6C7681 52%,#A9B2BB 70%,#7C8691 100%);
}

/* ---------- kleur: semantisch per hoofdstuk (§6.3) ----------
   Licht is de standaard; [data-chapter="nacht"] is de afsluiter en de footer.
   Geregistreerd als <color>, zodat een hoofdstukwissel op <html> in 0,5 s overvloeit (--ease-page),
   ook de grijze tekst. Zonder @property-ondersteuning wisselt het direct. */
@property --c-bg{syntax:'<color>';inherits:true;initial-value:#F3F2EF}
@property --c-fg{syntax:'<color>';inherits:true;initial-value:#121110}
@property --c-fg-2{syntax:'<color>';inherits:true;initial-value:#5C5954}
@property --c-line{syntax:'<color>';inherits:true;initial-value:#D5D2CC}
@property --c-surface{syntax:'<color>';inherits:true;initial-value:#E6E4DF}
@property --c-acc{syntax:'<color>';inherits:true;initial-value:#B5410F}
@property --c-acc-vlak{syntax:'<color>';inherits:true;initial-value:#E4531B}
:root{ --c-bg:var(--bot); --c-fg:var(--inkt); --c-fg-2:var(--inkt-2); --c-line:var(--line); --c-surface:var(--bot-2); --c-acc:var(--acc-licht); --c-acc-vlak:var(--acc-vlak); }
[data-chapter="nacht"]{ --c-bg:var(--nacht); --c-fg:var(--nacht-fg); --c-fg-2:var(--nacht-fg-2); --c-line:var(--nacht-line); --c-surface:var(--nacht-2); --c-acc:var(--acc-donker); --c-acc-vlak:var(--acc-donker); }
/* hoofdknop: oranje vlak met inkt (5,0:1 op licht, 5,5:1 op nacht), bij hover omgekeerd; selectie oranje met inkt.
   Opnieuw gezet onder nacht, omdat var() rekent op het element waar de variabele staat. */
:root,[data-chapter="nacht"]{ --hov-bg:var(--c-fg); --hov-fg:var(--c-bg); --sel-bg:var(--acc-donker); --sel-fg:var(--inkt); }

/* ---------- typografie (§7) ---------- */
:root{
  --f:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --fw-licht:300; --fw-regulier:400; --fw-nadruk:500; --fw-merk:800; --wdth-merk:125;   /* H2 licht; 800 en breedte 125 alleen voor het woordmerk en een H1-zin (#82) */
  --fs-mark:clamp(5.25rem,18.5vw,17rem); --fs-title:clamp(2.75rem,7.2vw,6.75rem);
  --fs-h2:clamp(2.5rem,4.8vw,4.75rem); --fs-statement:clamp(2.6rem,6.4vw,6.25rem); --fs-h3:clamp(1.3rem,1.8vw,1.6rem);
  --fs-body:1.0625rem; --fs-lede:1.125rem; --fs-meta:.8125rem;
  --lh-body:1.6; --lh-kop:1.02; --ls-kop:-.04em; --ls-h3:-.02em;
}

/* ---------- ruimte en vorm ---------- */
:root{ --container:1320px; --gutter:clamp(1rem,4vw,3.5rem); --section:clamp(5.5rem,12vw,11rem); --r:2px; }

/* ---------- beweging (§8) ---------- */
:root{
  --dur-1:120ms; --dur-2:240ms; --dur-3:450ms; --dur-4:800ms;
  --ease-settle:cubic-bezier(.16,1,.3,1); --ease-move:cubic-bezier(.625,.05,0,1); --ease-exit:cubic-bezier(.5,0,.75,0); --ease-snap:var(--ease-settle);
  --ease-page:cubic-bezier(.25,.46,.45,.94);   /* hoofdstukwissel, 0,5 s (gemeten bij Johannes Leonardo) */
  --stagger-line:80ms; --dist-rise:16px;
}

/* ── Regels (guide §6-§7, niet als token te vangen) ─────────────
   - Oranje heeft hooguit vier rollen: het blokje op licht, de hoofdknop, de streep (laadbalk), het casenummer.
     Per scherm hooguit één zichtbaar, onder ~3% van de pixels. Geen oranje koppen, pillen, iconen of onderstrepingen.
   - Wit op oranje komt nergens voor. Op de hoofdknop staat inkt.
   - --acc-licht als tekst alleen op --bot (5,03:1); op --bot-2 haalt hij 4,43:1, te weinig voor kleine tekst.
   - Tekst minimaal 4,5:1, grote koppen 3:1, knoppen 4,5:1 in beide staten. --field (3,46:1) alleen voor randen.
   - Lange tekst staat nooit op nacht. Eén lettersysteem; geen kapitalen voor alinea's.
   - Koppen: regelhoogte 1,0-1,1, spatiëring -0,02 tot -0,055 em; lopende tekst 1,5-1,6, 65-75 tekens per regel.

   ── Changelog ────────────────────────────────────────────────
   2.0.0 (2026-10-10) Redesign "zelfverzekerd licht" (#268, #211). Breekt met 1.x:
     - palet: donker #050505/#f5f0e8 met oranje #ff6b35 → bot-wit/inkt met drie oranjes en nacht als afsluiter;
     - letters: Clash Display, General Sans en JetBrains Mono → alleen Archivo, zelf gehost;
     - namen: --bg → --c-bg/--bot, --text → --c-fg/--inkt, --muted/--dim → --c-fg-2/--inkt-2, --border → --c-line/--line,
       --bg-surface/--bg-elevated → --c-surface/--bot-2, --accent → --acc-vlak (vlak) of --acc-licht (tekst),
       --font-display/--font-body/--font-mono → --f, --radius-* → --r (2px), --ease-out → --ease-settle,
       --ease-std → --ease-snap, --dur-fast/base/slow → --dur-1..4; --ok, --bad, --glow*, --shadow-glass vervallen.
   1.0.0 (2026-06-24) Eerste canonieke set (donker, Clash Display), 1f63258.
   ───────────────────────────────────────────────────────────── */