/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — het designsysteem van Zeker Weten
   Huisstijl Timing (by PROMAN), afgelezen van timing.nl en op contrast getoetst.
   Read-only fundering: schermbouwers lezen deze tokens, wijzigen ze niet.

   Draai na ELKE kleurwijziging:  node contrast.js app/tokens.css
   (en `node contrast.js` voor app.html; beide moeten groen blijven).

   ── DE TWEE REGELS DIE DIT BESTAND BIJ ELKAAR HOUDEN ─────────────────────────

   1. Kleuren die op WIT werken, werken niet op ZWART. Donkerturquoise en
      donkerrood zijn leesbaar op licht en verdwijnen op donker. Daarom heeft
      elk "diep" token een lichte tegenhanger in de dark-block hieronder.

   2. NOOIT een hardgecodeerde #fff/#000 op een vlak dat met de modus meebeweegt.
      Waar tekst op een gekleurd/meebewegend vlak staat, is er een --op-* /
      --*-op tokenpaar. Zo keert de doorknop om: light = zwart-vlak/witte-tekst,
      dark = licht-vlak/donkere-tekst. contrast.js weigert het foute patroon.

   ── HET KLEURVERHAAL (sectie 7 van OVERDRACHT.md) ────────────────────────────

     Turquoise  #62B7C8   het merk. Zwarte vette typografie erop (9,1:1).
                          Wit op turquoise is VERBODEN (2,3:1).
     Rood       #D74D6C   precies ÉÉN actie per scherm.
                          Rood vlak  = de handeling die je nu doet.
                          Rode streep = signaal (border-left).
     Zwart                doorgaan. De doorknop is zwart, niet rood — twee
                          betekenissen voor één kleur maakt beide zwakker.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;

  /* ── MERK (turquoise) ── in beide modi gelijk: het merk verandert niet met licht */
  --merk:#62B7C8;            /* hero / topbalk */
  --merk-op:#55A9BA;         /* subtiele merkrand/hover */
  --op-merk:#000000;         /* tekst OP turquoise: zwart, 9,1:1 — nooit wit */
  --merk-diep:#2C6673;

  /* ── ACCENT (turquoise, voor tekst en zachte vlakken) ── */
  --accent:#62B7C8;
  --accent-diep:#1B7382;     /* accenttekst op licht: 4,9:1 */
  --accent-zacht:#E7F3F6;    /* zacht turquoise vlak (actief hoofdstuk, kaders) */

  /* ── ACTIE (rood) ── de ene rode actie per scherm ── */
  --actie:#D74D6C;           /* rood vlak, zoals ZOEK JOUW BAAN. Knoptekst 14px/700:
                                grens grote tekst 3:1 → 4,06:1 met wit ✓ */
  --actie-op:#C43F5D;        /* hover van het rode vlak */
  --actie-diep:#B93551;      /* rode TEKST op licht: 4,8:1 */
  --op-actie:#FFFFFF;        /* tekst op het rode vlak */

  /* ── INKT & VLAKKEN ── neutrale grijstrap, licht ── */
  --ink:#000000;             /* koptekst */
  --ink-2:#33383F;           /* lopende tekst */
  --ink-3:#61676F;           /* bijschrift */
  --ink-4:#61686F;           /* metatekst */
  --vlak:#FFFFFF;            /* kaart */
  --doek:#F2F3F7;            /* paginavlak (grijs — test HIER tegen, niet tegen wit) */
  --lijn:#E1E4EA;            /* rand */
  --lijn-2:#ECEEF2;          /* zachte rand / chip-achtergrond */

  /* ── DOORGAAN (zwart, keert om in dark) ── */
  --door:#000000;            /* doorknop binnen een sessie */
  --door-op:#FFFFFF;         /* tekst op de doorknop */
  --door-hover:#2A2E34;

  /* ── TOAST ── */
  --toast:#000000;           /* zwart, niet turquoise (dat gaf 2,3:1) */
  --toast-op:#FFFFFF;

  /* ── DE VIER KWADRANTEN ── kleur + bijpassend zacht vlak ── */
  --aligned:#0E7350;      --aligned-z:#EAF6F0;     /* goed én zeker */
  --gegokt:#8A6214;       --gegokt-z:#FBF4E4;      /* goed, gegokt */
  --onwetend:#5B6470;     --onwetend-z:#F0F2F4;    /* fout, met twijfel */
  --misinformed:#B03652;  --misinformed-z:#FBEEF1; /* fout én zeker — het dure kwadrant */
  --misinformed-vlak:#B03652;   /* vlak achter de correctiekop */
  --op-misinformed:#FFFFFF;     /* tekst op dat vlak */

  /* ── FOCUS ── zichtbare toetsenbord-focus (WCAG 2.4.7) ── */
  --focus:#1B7382;              /* focusring, licht: contrasteert met doek en vlak */

  /* ── TYPOGRAFIE ── */
  --ui:'Inter var','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lees:'Charter','Iowan Old Style',Georgia,serif;   /* leesstof/naslag */
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  --tekst-xs:11px; --tekst-s:13px; --tekst-m:15px; --tekst-l:18.5px;
  --tekst-xl:clamp(25px,4vw,34px);
  --vet-normaal:450; --vet-mid:550; --vet-half:650; --vet-vet:700; --vet-zwaar:800;
  --leading-strak:1.15; --leading-ui:1.5; --leading-lees:1.68;

  /* ── SPACING (4px-grid) ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* ── RADIUS ── */
  --r:12px; --r-s:8px; --r-xs:4px; --r-vol:99px;

  /* ── LAYOUT-MATEN ── */
  --top:58px;                /* hoogte topbalk */
  --rail:280px;              /* breedte navigatierail (desktop) */
  --lees-breedte:66ch;       /* leesregelbreedte naslag */
  --bodem:60px;              /* hoogte mobiele tabbalk */

  /* ── SCHADUW ── */
  --schaduw:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.18);
  --schaduw-s:0 1px 2px rgba(0,0,0,.06);

  /* ── MICRO-INTERACTIES: timing + easing ─────────────────────────────────────
     Dit is de gereedschapskist voor het moment tussen "Zeker" en het oordeel.
     Nuchter: geen bounce, geen overshoot, geen spektakel. Wel: kort, zeker,
     iOS-achtige uitloop. Schermbouwers gebruiken deze tokens, verzinnen geen
     eigen getallen — zo voelt elke overgang in de app hetzelfde aan.

       --snel        knopfeedback, hover, pressed
       --vlot        paneel open/dicht, opties vastzetten
       --kalm        het oordeel dat verschijnt, de correctiekaart die intreedt
       --traag       balken die vullen, grote statuswissels

     De easings:
       --ease-uit    (decelerate) standaard voor iets dat binnenkomt/tot rust komt
       --ease-inuit  symmetrisch, voor iets dat beweegt en weer stopt
       --ease-scherp korte, besliste UI-reactie ── */
  --snel:120ms;
  --vlot:220ms;
  --kalm:340ms;
  --traag:480ms;
  --ease-uit:cubic-bezier(.32,.72,0,1);
  --ease-inuit:cubic-bezier(.65,0,.35,1);
  --ease-scherp:cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — een EIGEN ontwerp, geen kleurenomdraai.
   Alleen tokens worden overschreven; geen enkele regel elders in base.css/ui.js.

   De topbalk blijft turquoise met zwarte tekst: het merk verandert niet met het
   licht, en 9,1:1 is in beide modi prima. De "diepe" accenten KEREN OM:
   donkerrood → lichtroze, donkerturquoise → lichtturquoise. Anders verdwijnen ze
   in het vlak. De doorknop keert om: licht vlak, donkere tekst.

   Test tegen het grijze paginavlak (--doek), niet alleen tegen de kaart (--vlak).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --op-merk:#000000;         /* onveranderd: zwart op turquoise */
    --merk-op:#6FC0D0;

    --accent-diep:#6FC6D6;     /* 8,8:1 op de kaart */
    --accent-zacht:#16323A;
    --actie-diep:#F0899E;      /* 7,2:1 op de kaart */
    --op-actie:#FFFFFF;        /* wit op rood blijft, 4,06:1 bij 14px/700 */

    --ink:#F2F4F7; --ink-2:#C6CBD2; --ink-3:#9AA1AA; --ink-4:#949CA6;
    --vlak:#181B20; --doek:#101215; --lijn:#2C313A; --lijn-2:#23272E;

    --door:#E7EAEE;            /* omgekeerd: licht vlak, donkere tekst */
    --door-op:#101215;
    --door-hover:#CFD4DA;
    --toast:#E7EAEE;
    --toast-op:#101215;

    --focus:#6FC6D6;           /* lichte focusring, leesbaar op donker doek */

    --aligned:#57C79A;      --aligned-z:#12271F;
    --gegokt:#D9A83C;       --gegokt-z:#2A2210;
    --onwetend:#A7AEB8;     --onwetend-z:#20242A;
    --misinformed:#F0899E;  --misinformed-z:#2C171C;
    --misinformed-vlak:#8E2A42;   /* donkerder vlak, want de tekst blijft wit */
    --op-misinformed:#FFFFFF;

    --schaduw:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.7);
    --schaduw-s:0 1px 2px rgba(0,0,0,.4);
  }
}