/* tb-tokens.css — de enige bron voor de huisstijl van theoriebriljant.nl.
   Richting: Examenbureau (keuze Daan, 3-10-2026).
   Schets: workspaces/theoriebriljant/redesign/schetsen/1-examenbureau.html
   Ontwerp: workspaces/theoriebriljant/redesign/2026-10-03-huisstijl-design.md

   WIJZIG KLEUREN ALLEEN HIER. Staat een kleurwaarde ook ergens anders in eigen CSS,
   dan is dat een fout: tot 3-10-2026 stond de huisstijl op vier plekken met drie
   verschillende oranjes (#FF751F in het logo, #FB6D3A publiek, #F97316 in de app). */

:root{
  /* tekst */
  --tb-ink:#0B1220;
  --tb-ink-2:#44506B;
  /* 4-10-2026: was #8A94A8, en dat haalde op --tb-canvas-2 maar 2,85:1 waar 4,5:1
     de norm is. Dezelfde blauwgrijze tint op 70%, gekozen omdat hij als enige ook op
     --tb-canvas-3 (de gevulde chips) boven de norm blijft:
     op #FFFFFF 5,60:1 · op #F6F7F9 5,22:1 · op #EEF1F5 4,94:1. Besluit Daan. */
  --tb-ink-3:#616876;

  /* vlakken */
  --tb-canvas:#FFFFFF;
  --tb-canvas-2:#F6F7F9;
  --tb-canvas-3:#EEF1F5;

  /* lijnen */
  --tb-line:#E2E6ED;
  --tb-line-2:#CFD5E0;

  /* signaal: oranje markeert wat de aandacht verdient, het is geen hoofdkleur.
     De primaire knop is inkt. --tb-accent haalt als tekst op wit geen 4,5:1,
     gebruik daarvoor altijd --tb-accent-ink. */
  --tb-accent:#FF751F;        /* exact de logokleur, gemeten op de pixels */
  --tb-accent-ink:#B5470A;    /* oranje als tekst: 4,6:1 op wit */
  --tb-accent-soft:#FFF3EB;

  /* status */
  --tb-ok:#0F766E;
  --tb-ok-soft:#E6F4F1;
  --tb-warn:#B45309;
  --tb-warn-soft:#FEF4E6;

  /* Fout, en de leesbare tekstvariant van fout en ok. Toegevoegd 4-10-2026: het
     ontwerp kende wel --tb-ok en --tb-warn maar geen foutkleur, waardoor in de
     leeromgeving vier letterlijke waarden stonden (#FCA5A5, #6EE7B7 en twee rgba's)
     die op een lichte ondergrond onleesbaar werden. Een statuskleur ALS TEKST op zijn
     eigen zachte vlak haalt de norm niet: #DC2626 op #FEE2E2 is 3,95:1. Daar is -ink voor. */
  --tb-fout:#DC2626;
  --tb-fout-ink:#B91C1C;      /* fouttekst: 5,9:1 op wit */
  --tb-ok-ink:#0F766E;        /* oktekst: 4,8:1 op wit */
  /* Waarschuwing als tekst, zelfde reden als fout en ok. #B45309 haalt op --tb-line
     4,01:1 (de klok in de laatste minuten, de markeerknop). Toegevoegd 4-10-2026. */
  --tb-warn-ink:#92400E;      /* 7,1:1 op wit, 5,7:1 op --tb-line */

  /* Tekst, icoon of knopvlak BOVENOP de oranje signaalkleur. Wit in beide modi: een
     oranje knop is in licht en donker dezelfde oranje knop. Zet dit nooit op --tb-ink,
     dan wordt elke knoptekst donker zodra de lichte modus aangaat. */
  --tb-op-accent:#FFFFFF;

  /* vorm */
  --tb-r:8px;
  --tb-r-sm:4px;

  /* ruimte */
  --tb-s1:8px;
  --tb-s2:16px;
  --tb-s3:24px;
  --tb-s4:40px;
  --tb-s5:64px;
  --tb-s6:96px;

  /* letters */
  --tb-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* beweging: alleen als antwoord op een handeling */
  --tb-t:180ms;
}

html[data-tb-mode="donker"]{
  --tb-ink:#F2F5F8;
  --tb-ink-2:#A6B0BD;
  /* 4-10-2026: was #6E7A89 (4,00:1 op canvas-2, 3,66:1 op canvas-3). Zelfde ingreep
     als in licht, andere kant op: op 112%. 5,37 · 4,96 · 4,54:1. */
  --tb-ink-3:#7C8A9B;

  --tb-canvas:#0E1116;
  --tb-canvas-2:#151A21;
  --tb-canvas-3:#1C222B;

  --tb-line:#262E39;
  --tb-line-2:#36404D;

  --tb-accent:#FF751F;
  --tb-accent-ink:#FF9A5A;
  --tb-accent-soft:rgba(255,117,31,.13);

  --tb-ok:#34D399;
  --tb-ok-soft:rgba(52,211,153,.12);
  --tb-warn:#FBBF24;
  --tb-warn-soft:rgba(251,191,36,.12);

  --tb-fout:#EF4444;
  --tb-fout-ink:#FCA5A5;      /* gelijk aan wat er in de leeromgeving stond */
  --tb-ok-ink:#6EE7B7;        /* idem */
  --tb-warn-ink:#FBBF24;      /* gelijk aan --tb-warn, haalt in donker ruim de norm */
  --tb-op-accent:#FFFFFF;
}

@media(prefers-reduced-motion:reduce){
  :root{--tb-t:0ms}
}