/* ─────────────────────────────────────────────────────────────────────────
   Eindelijk Controle — design tokens · Kaarten

   Sinds 7 oktober richting B, "Kaarten" (gekozen in _studie/richtingen):
   een licht bureau met kaarten erop. Elke groep is een vak dat je ziet.
   Licht staat in het palet "Donker kader" (_studie/licht): een warm licht
   bureau, kaarten in gebroken wit, en de bovenbalk en de navigatie links
   donker, als kader (--frame-*). Donker is een zwart bureau met iets
   lichtere kaarten. Zwart, grijs en wit dragen de hiërarchie, één signaalkleur
   voor nu en voor wat een oordeel vraagt. Details zijn donker genoeg om
   te lezen: alle tekstkleuren halen minstens 4,5 : 1 op wit én op het
   bureau. (Graphite, de vorige stijl: _archief/stijl-graphite-voor-kaarten.)
   Uit v1 komt terug: elk bedrijf heeft een eigen kleur, maar alleen als
   klein merkteken (streep, stip, codetegel), nooit als groot vlak.

   Bedrijfskleuren zijn een keuze van de gebruiker. Hieronder staan de
   standaardkleuren (--e-*), voor licht en donker apart gevalideerd;
   kleuren.js legt er de keuze van de gebruiker overheen (in beide
   thema's dezelfde). Geen enkele standaardkleur is rood of oranje: dat
   is het signaal.

   Dit bestand is gedeeld door alle stukken: een wijziging hier geldt overal.
   Na een wijziging: python3 _basis/verspreid.py (kopieert naar elk stuk).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* neutraal: Kaarten, licht in het palet "Donker kader" (gekozen in
     _studie/licht): een warm licht bureau, kaarten in gebroken wit, zachter
     zwart. Niet puur wit en niet blauwgrijs, want dat was te scherp.
     --bg is het bureau, --bg-elev een kaart. */
  --bg: #efeeeb;
  --bg-elev: #fdfdfc;
  --bg-sunken: #f6f5f3;
  --bg-hover: #f5f4f2;
  --bg-active: #e6e4e0;
  --bg-tint: #f6f5f3;
  --line-faint: #efeeeb;
  --line: #e4e2de;
  --line-strong: #d4d1cb;

  /* op een kaart · op het bureau: text 16,4 · 14,4 · text-2 7,8 · 6,8 · text-3 6,0 · 5,2 */
  --text: #1f1e1d;
  --text-2: #53514d;
  --text-3: #65625d;
  --text-inv: #fdfdfc;

  --ink: #1a1b1e;
  --ink-hover: #000000;

  /* EC en selectie zijn inkt, geen kleur */
  --accent: var(--ink);
  --accent-hover: var(--ink-hover);
  --accent-text: var(--ink);
  --accent-soft: #efede9;
  --accent-softer: #f5f4f2;
  --accent-line: #d4d1cb;

  /* het ene signaal: nu, te laat, vraagt een oordeel (5,1 : 1 op een kaart) */
  --signal: #c2410c;
  --attn: var(--signal);
  --attn-soft: #fbe8df;
  --attn-line: var(--signal);
  --crit: var(--signal);
  --crit-soft: #fbe8df;
  --crit-line: var(--signal);
  --ok: var(--ink);
  --ok-soft: #efede9;

  --money-in: var(--ink);
  --money-out: var(--text);
  --debt: #5c5a56;
  --debt-soft: #f0efec;

  /* de kaart: elke groep, elk paneel, elke lijst ligt op het bureau */
  --card: var(--bg-elev);
  --card-line: #e2e0db;
  --card-r: 12px;
  --card-shadow: 0 1px 2px rgba(20, 20, 20, 0.05);
  --card-gap: 12px;
  /* zachte vulling: knoppen, labels, icoonvakjes; en de geselecteerde rij */
  --fill: #f0efec;
  --fill-hover: #e6e4e0;
  --sel: #efede9;
  --sel-line: #dad6cf;
  --seg-bg: #e4e2de;

  /* het kader: de bovenbalk en de navigatie links zijn donker, ook in licht.
     componenten.css zet deze tokens op #topbar, .rw-rail en .m-tabs.
     Tekst op het kader: 16,1 · 8,9 · 5,8 : 1. */
  --frame: #0f1012;
  --frame-rail: #0f1012;
  --frame-edge: #0f1012;
  --frame-elev: #1f2023;
  --frame-hover: #26272a;
  --frame-active: #2e2f33;
  --frame-line: #2a2b2e;
  --frame-line-strong: #3d3e42;
  --frame-text: #ececee;
  --frame-text-2: #b1b1b8;
  --frame-text-3: #8d8d95;
  --frame-inv: #111214;
  --frame-fill: #26282d;
  --frame-signal: #ef7a45;
  --frame-tint-tile: 30%;

  /* bedrijfskleuren: standaard, door de gebruiker te kiezen.
     Gevalideerd met de dataviz-validator (alle paren, licht op #fafafa):
     kleurenblind ΔE ≥ 10,5 · normaal zien ΔE ≥ 17 · goud en aqua < 3:1
     contrast, dus de bedrijfscode staat er altijd bij. */
  --e-lvdg: #5b85e2;  /* LVDG B.V. — blauw */
  --e-gd: #31763b;    /* Going Dutch B.V. — groen */
  --e-dj: #664b98;    /* DJ B.V. — violet */
  --e-lf: #c5a84b;    /* Luc Forward B.V. — goud */
  --e-chr: #be5a8d;   /* CleverHR B.V. — magenta */
  --e-hh: #20c0ab;    /* Household — aqua */
  --e-luc: #20c0ab;   /* Luc, persoonlijk — aqua */

  /* zoals ze getekend worden */
  --t-lf: var(--e-lf);
  --t-lvdg: var(--e-lvdg);
  --t-gd: var(--e-gd);
  --t-dj: var(--e-dj);
  --t-chr: var(--e-chr);
  --t-hh: var(--e-hh);
  --t-luc: var(--e-luc);
  --t-all: #9d9d9c;
  /* hoeveel bedrijfskleur er in een vlak mag (agenda-blok, codetegel) */
  --tint: 13%;
  --tint-tile: 18%;

  --f-ui: "Albert Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-display: var(--f-ui);
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --r-xs: 4px;
  --r-sm: 8px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-full: 999px;

  /* kaarten liggen net op het bureau; zwevende lagen zweven echt */
  --shadow-1: var(--card-shadow);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, 0.08), 0 6px 16px -8px rgba(16, 24, 40, 0.12);
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.05), 0 24px 60px -16px rgba(0, 0, 0, 0.3);
  --shadow-sheet: -1px 0 0 var(--line-strong), -24px 0 60px -30px rgba(0, 0, 0, 0.3);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 140ms;
  --d: 220ms;
  --d-slow: 360ms;

  --topbar-h: 52px;
  /* het frame van elk scherm (FD-20): onder de bovenbalk de balk van het
     scherm, altijd even hoog; daaronder overal dezelfde rand tot het venster */
  --bar-h: 52px;
  --gutter: 16px;
  /* het zijmenu links in een werkruimte (FD-21, FD-22); met de rand ervoor
     loopt het tot de rand van het venster */
  --rail-w: 236px;
  /* het paneel naast een collectie (taken, kansen) */
  --dock-w: 560px;
  --hour-h: 52px;

  color-scheme: light;
}

/* Donker: een donker bureau met iets lichtere kaarten, bedrijfskleuren iets opgelicht. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1012;
    --bg-elev: #1a1b1e;
    --bg-sunken: #151619;
    --bg-hover: #222327;
    --bg-active: #2a2c31;
    --bg-tint: #1e1f23;
    --line-faint: #24262a;
    --line: #2c2e33;
    --line-strong: #3a3d43;
    /* op een kaart · op het bureau: text-2 8,1 · 8,9 · text-3 5,2 · 5,8 */
    --text: #ececee;
    --text-2: #b1b1b8;
    --text-3: #8d8d95;
    --text-inv: #111214;
    --ink: #ececee;
    --ink-hover: #ffffff;
    --accent-soft: #24262b;
    --accent-softer: #1f2125;
    --accent-line: #3a3d43;
    --signal: #ef7a45;
    --attn-soft: #2c1e17;
    --crit-soft: #2c1e17;
    --ok-soft: #24262b;
    --debt: #b1b1b8;
    --debt-soft: #24262b;
    --card-line: #2a2c31;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --fill: #26282d;
    --fill-hover: #2e3036;
    --sel: #262a31;
    --sel-line: #3a404a;
    --seg-bg: #08090a;
    /* het kader in donker: zoals de bovenbalk altijd was */
    --frame: #1a1b1e;
    --frame-rail: transparent;
    --frame-edge: #2a2c31;
    --frame-elev: #1a1b1e;
    --frame-hover: #222327;
    --frame-active: #2a2c31;
    --frame-line: #2a2c31;
    --frame-line-strong: #3a3d43;
    --frame-text: #ececee;
    --frame-text-2: #b1b1b8;
    --frame-text-3: #8d8d95;
    --frame-inv: #111214;
    --frame-fill: #26282d;
    --frame-signal: #ef7a45;
    --frame-tint-tile: 30%;
    /* donker: eigen gevalideerde stappen (alle paren op #1b1b1b, ≈ de kaart #1a1b1e:
       kleurenblind ΔE ≥ 8,1 · normaal zien ΔE ≥ 15) */
    --e-lvdg: #2b68ba;
    --e-gd: #457304;
    --e-dj: #aa74c0;
    --e-lf: #a38333;
    --e-chr: #bf216c;
    --e-hh: #38a58f;
    --e-luc: #38a58f;
    --t-all: #8d8d95;
    --tint: 22%;
    --tint-tile: 30%;
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px -12px rgba(0, 0, 0, 0.7);
    --shadow-sheet: -1px 0 0 var(--line-strong), -24px 0 60px -30px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1012;
  --bg-elev: #1a1b1e;
  --bg-sunken: #151619;
  --bg-hover: #222327;
  --bg-active: #2a2c31;
  --bg-tint: #1e1f23;
  --line-faint: #24262a;
  --line: #2c2e33;
  --line-strong: #3a3d43;
  /* op een kaart · op het bureau: text-2 8,1 · 8,9 · text-3 5,2 · 5,8 */
  --text: #ececee;
  --text-2: #b1b1b8;
  --text-3: #8d8d95;
  --text-inv: #111214;
  --ink: #ececee;
  --ink-hover: #ffffff;
  --accent-soft: #24262b;
  --accent-softer: #1f2125;
  --accent-line: #3a3d43;
  --signal: #ef7a45;
  --attn-soft: #2c1e17;
  --crit-soft: #2c1e17;
  --ok-soft: #24262b;
  --debt: #b1b1b8;
  --debt-soft: #24262b;
  --card-line: #2a2c31;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --fill: #26282d;
  --fill-hover: #2e3036;
  --sel: #262a31;
  --sel-line: #3a404a;
  --seg-bg: #08090a;
  /* het kader in donker: zoals de bovenbalk altijd was */
  --frame: #1a1b1e;
  --frame-rail: transparent;
  --frame-edge: #2a2c31;
  --frame-elev: #1a1b1e;
  --frame-hover: #222327;
  --frame-active: #2a2c31;
  --frame-line: #2a2c31;
  --frame-line-strong: #3a3d43;
  --frame-text: #ececee;
  --frame-text-2: #b1b1b8;
  --frame-text-3: #8d8d95;
  --frame-inv: #111214;
  --frame-fill: #26282d;
  --frame-signal: #ef7a45;
  --frame-tint-tile: 30%;
  /* donker: eigen gevalideerde stappen (alle paren op #1b1b1b, ≈ de kaart #1a1b1e:
     kleurenblind ΔE ≥ 8,1 · normaal zien ΔE ≥ 15) */
  --e-lvdg: #2b68ba;
  --e-gd: #457304;
  --e-dj: #aa74c0;
  --e-lf: #a38333;
  --e-chr: #bf216c;
  --e-hh: #38a58f;
  --e-luc: #38a58f;
  --t-all: #8d8d95;
  --tint: 22%;
  --tint-tile: 30%;
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --shadow-sheet: -1px 0 0 var(--line-strong), -24px 0 60px -30px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}