/* tokens.css — de gedeelde namen. [GROTE_UI_20261031]
 *
 * WAT DIT BESTAND WEL EN NIET IS
 * ==============================
 * Dit is GEEN stylesheet voor een pagina. Het is de afspraak over NAMEN.
 * Elk platform heeft zijn eigen waarden; de namen zijn overal gelijk, zodat
 * `--bg` overal "de achtergrond van de pagina" betekent.
 *
 * WAAROM DAT DE KERN IS
 * =====================
 * Hermes bewaart de keuze van een gebruiker (mode, palette, accent, density).
 * Die keuze moet op drie platformen hetzelfde aanvoelen zonder dat Hermes de
 * opmaak van die platformen serveert -- want dan is een storing in Hermes een
 * onopgemaakte pagina elders.
 *
 * Dus: de keuze reist als data (`data-mode` op <html>), en dit bestand vertelt
 * elk platform WELKE namen het moet vullen. De waarden blijven lokaal.
 *
 * DE REGEL DIE HIERUIT VOLGT
 * ==========================
 * Een platform dat een naam niet vult, erft de standaard uit dit bestand. Dat is
 * de terugval, niet de bedoeling. Vandaar dat alle namen hier een waarde hebben.
 */

:root {
  /* --- Oppervlakken: van achtergrond naar verhoogd ---------------------- */
  --bg:            #f7f7f8;   /* de pagina zelf */
  --surface:       #ffffff;   /* kaarten; in licht LICHTER dan --bg */
  --surface-2:     #f1f2f4;   /* ingelegde vlakken, tabelkoppen */
  --surface-3:     #e8e9ec;   /* hover op een ingelegd vlak */

  /* --- Lijnen ---------------------------------------------------------- */
  --line:          #e3e4e8;
  --line-strong:   #888b97;   /* was #cdced4: 1,47:1 -- onzichtbaar als rand */

  /* --- Tekst ----------------------------------------------------------- */
  --txt:           #1f2430;
  --muted:         #6b7280;
  --txt-inverse:   #ffffff;

  /* --- Merkkleur ------------------------------------------------------- */
  --accent:        #9a5530;   /* was #b1663c: 4,34:1 met wit erop, net onder AA */
  --accent-hover:  #83462a;
  --accent-soft:   #f4e9e2;
  --accent-fg:     #ffffff;   /* tekst OP de accentkleur */

  /* --- Statussen ------------------------------------------------------- */
  --ok:            #147547;   /* was #1f9d61: 3,24:1 -- onleesbaar als tekst */
  --ok-soft:       #e6f4ec;
  --warn:          #96620f;   /* was #b7791f: 3,40:1 */
  --warn-soft:     #fdf3e3;
  --err:           #c0392b;
  --err-soft:      #fbeae8;

  /* --- Vorm ------------------------------------------------------------ */
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:     0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);

  /* --- Maatvoering ----------------------------------------------------- */
  --topbar-h:      56px;
  --sidebar-w:     232px;
  --focus-ring:    0 0 0 3px rgba(177,102,60,.28);

  /* --- Beweging -------------------------------------------------------- */
  --tr:            150ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════
 * DONKER
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Dit is een VOLLEDIGE set, niet "de lichte set met een donkere achtergrond".
 * De relatie blijft gelijk: --surface ligt boven --bg, --surface-2 ligt boven
 * --surface. Wie alleen --bg omzet, krijgt kaarten die wegvallen -- en dat is
 * de meest voorkomende dark-mode-fout.
 *
 * De accentkleur wordt LICHTER in donker. Dezelfde #b1663c op een donkere
 * achtergrond haalt de contrastnorm niet; #d98a5e wel.
 */
[data-mode="dark"] {
  --bg:            #0f1115;
  --surface:       #171a20;
  --surface-2:     #1e222a;
  --surface-3:     #262b35;

  --line:          #2a2f39;
  --line-strong:   #626b7f;   /* was #3a4150: 1,85:1 */

  --txt:           #e8eaee;
  --muted:         #9aa2b1;
  --txt-inverse:   #0f1115;

  --accent:        #d98a5e;
  --accent-hover:  #e8a179;
  --accent-soft:   #33241c;
  --accent-fg:     #1a1008;

  --ok:            #4ec98a;
  --ok-soft:       #14301f;
  --warn:          #e0a94a;
  --warn-soft:     #322613;
  --err:           #e8776a;
  --err-soft:      #341a17;

  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  --focus-ring:    0 0 0 3px rgba(217,138,94,.32);
}

/* ═══════════════════════════════════════════════════════════════════════
 * PALETTEN — alleen de merkkleur, niet de oppervlakken
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Een palet verandert de accentkleur en zijn afgeleiden. Het verandert NIET de
 * oppervlakken: anders zou een paletwissel in donker de contrastverhoudingen
 * breken die hierboven met zorg zijn gekozen.
 */
[data-palette="forest"] {
  --accent:        #2f6f62;
  --accent-hover:  #245a4f;
  --accent-soft:   #e7f1ee;
  --focus-ring:    0 0 0 3px rgba(47,111,98,.28);
}
[data-mode="dark"][data-palette="forest"] {
  --accent:        #5fb3a1;
  --accent-hover:  #7cc7b6;
  --accent-soft:   #16302b;
  --accent-fg:     #07130f;
  --focus-ring:    0 0 0 3px rgba(95,179,161,.30);
}

[data-palette="rose"] {
  --accent:        #b04a5e;
  --accent-hover:  #96394c;
  --accent-soft:   #f9eaed;
  --focus-ring:    0 0 0 3px rgba(176,74,94,.28);
}
[data-mode="dark"][data-palette="rose"] {
  --accent:        #e0899a;
  --accent-hover:  #eda3b1;
  --accent-soft:   #331a20;
  --accent-fg:     #180a0d;
  --focus-ring:    0 0 0 3px rgba(224,137,154,.30);
}

[data-palette="ocean"] {
  --accent:        #2a6f97;
  --accent-hover:  #215a7a;
  --accent-soft:   #e6f0f7;
  --focus-ring:    0 0 0 3px rgba(42,111,151,.28);
}
[data-mode="dark"][data-palette="ocean"] {
  --accent:        #6cb2d9;
  --accent-hover:  #8ac6e6;
  --accent-soft:   #14262f;
  --accent-fg:     #06131a;
  --focus-ring:    0 0 0 3px rgba(108,178,217,.30);
}

/* ═══════════════════════════════════════════════════════════════════════
 * DICHTHEID — ruimte, geen kleur
 * ═══════════════════════════════════════════════════════════════════════ */
[data-density="compact"] {
  --topbar-h:      48px;
  --sidebar-w:     204px;
  --radius:        8px;
  --radius-sm:     5px;
}
[data-density="compact"] body { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
 * SYSTEEMSTAND — de server kent de telefoon niet, dus lost de browser het op
 * ═══════════════════════════════════════════════════════════════════════
 *
 * `mode=system` wordt hier opgelost, niet op de server. De server bewaart de
 * BEDOELING; de browser kent de UITKOMST. Zou de server het beslissen, dan had
 * één identiteit op twee apparaten één opgeslagen modus -- en dan klopt hij op
 * minstens één van de twee niet.
 */
@media (prefers-color-scheme: dark) {
  [data-mode="system"] {
    --bg:            #0f1115;
    --surface:       #171a20;
    --surface-2:     #1e222a;
    --surface-3:     #262b35;
    --line:          #2a2f39;
    --line-strong:   #3a4150;
    --txt:           #e8eaee;
    --muted:         #9aa2b1;
    --txt-inverse:   #0f1115;
    --accent:        #d98a5e;
    --accent-hover:  #e8a179;
    --accent-soft:   #33241c;
    --accent-fg:     #1a1008;
    --ok:            #4ec98a;
    --ok-soft:       #14301f;
    --warn:          #e0a94a;
    --warn-soft:     #322613;
    --err:           #e8776a;
    --err-soft:      #341a17;
    --shadow:        0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg:     0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
    --focus-ring:    0 0 0 3px rgba(217,138,94,.32);
  }
  [data-mode="system"][data-palette="forest"] {
    --accent: #5fb3a1; --accent-hover: #7cc7b6;
    --accent-soft: #16302b; --accent-fg: #07130f;
  }
  [data-mode="system"][data-palette="rose"] {
    --accent: #e0899a; --accent-hover: #eda3b1;
    --accent-soft: #331a20; --accent-fg: #180a0d;
  }
  [data-mode="system"][data-palette="ocean"] {
    --accent: #6cb2d9; --accent-hover: #8ac6e6;
    --accent-soft: #14262f; --accent-fg: #06131a;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * EERBIED VOOR DE GEBRUIKER DIE BEWEGING UIT WIL
 * ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --tr: 0ms; }
}