/* Horecast · tokens (UX fase 4, 20/10/2026). De enige laag met kleurwaarden, maten en tijden.
   Volgorde van de stylesheets (index.html): tokens.css -> theo.css (basis en componenten) -> theo-plus.css ->
   theo-fase2.css (huisstijl van de publieke site) -> de schermen (bestellingen, twin, kasboek-export) -> ux-fase1..4.
   Gegenereerd uit het palet (scratchpad ux-fase4/tools/fase4.py) en daarna met de hand nagekeken.

   Drie lagen:
   1. het palet (--p-*): de huisstijl van Theo, vast: papier/creme, inkt, olijf, messing, blad, rood, en een paar
      kleuren voor categorieen (meldingen, weer, afdelingen) en de plattegrond. Alleen hier staan hexwaarden.
   2. de rollen: wat een component gebruikt. Ze volgen het thema:
        grond   --bg (pagina), --surface (kaart), --surface-2 (tabelkop), --surface-3 (linnen), --surface-4 (zand),
                --inset (veld), --raised (wit vlak)
        lijn    --line, --line-2, --line-3, --line-strong, --line-4
        tekst   --text-strong, --text, --text-2 (ondertitel), --text-3 (meta), --text-faint (uitgeschakeld)
        status  --ok / --ok-ink / --ok-bg, --err / --err-ink / --err-bg, --warn / --warn-ink / --warn-bg,
                --info-ink / --info-bg; messing: --brand (vlak), --brand-ink (tekst), --on-brand
      en vaste rollen die in beide thema's donker of licht blijven: --chrome (kopband, zijbalk, primaire knop),
      --on-chrome (tekst daarop), --brand, --wit (een wit vak voor merklogo's en QR-codes blijft wit).
      Regel uit de audit: tekst op messing is altijd inkt (--on-brand), nooit wit of creme.
   3. de oude namen (theo.css, theo-fase2.css, de Preact-tabs, inline stijl in de tabs) wijzen naar de rollen.

   Type: 10 maten (--t-xs 12 px .. --t-5xl 40 px); minstens 12 px. Ruimte 4/8/12/16/24/32/48. Radius 3 + pil.
   Beweging: --d-1 90 ms (druk), --d-2 160 ms (klein element, toast), --d-3 240 ms (venster, schermwissel),
   één easing (--ease-out); prefers-reduced-motion zet alles op 0. */

:root {
  /* ---- 1. het palet: de huisstijl van Theo (vast, in beide thema's dezelfde waarde) ---- */
  --p-wit: #ffffff;
  --p-creme-0: #fffdf6;
  --p-creme-1: #fbf8ea;
  --p-creme-2: #f4eedb;
  --p-inset: #f1ead2;
  --p-linnen: #efe7cc;
  --p-zand: #e9e2c4;
  --p-lijn: #e4dbbb;
  --p-lijn-2: #ddd2ab;
  --p-lijn-3: #d6cca0;
  --p-grijs: #cfc7ae;
  --p-lijn-sterk: #c8bc92;
  --p-lijn-4: #b8aa78;
  --p-creme-mat: #c9bfa3;
  --p-olijf-licht: #a89f86;
  --p-olijf-vaag: #9a8f72;
  --p-olijf: #8c7d54;
  --p-olijf-mute: #6b6148;
  --p-olijf-inkt: #5e5337;
  --p-inkt-3: #2f2a22;
  --p-inkt-2: #221d17;
  --p-inkt: #15120e;
  --p-zwart: #000000;
  --p-steen: #8c9296;
  --p-steen-licht: #e3e3e3;
  --p-antraciet: #4a463e;
  --p-leisteen: #4f5d72;
  --p-messing-tint: #f7e7a0;
  --p-messing-licht: #f1d675;
  --p-geel: #f2c200;
  --p-messing: #d4af37;
  --p-messing-diep: #b8952c;
  --p-messing-donker: #8a6a14;
  --p-messing-inkt: #7a5d10;
  --p-messing-nacht: #4f3c0b;
  --p-amber-tint: #f6ead0;
  --p-amber: #c9a845;
  --p-amber-inkt: #8a5a00;
  --p-oranje-tint: #f6d9b8;
  --p-oranje-zacht: #ffb066;
  --p-oranje-fel: #d08a00;
  --p-oranje: #d9822b;
  --p-oranje-2: #c8641b;
  --p-oranje-donker: #b4530f;
  --p-oranje-nacht: #7a3e00;
  --p-blad-tint: #e4ede6;
  --p-blad-tint-2: #d6e8d8;
  --p-blad-licht: #a9c6ac;
  --p-plant-licht: #8cc07d;
  --p-plant: #6ea461;
  --p-blad: #72997a;
  --p-blad-mid: #4f8a5b;
  --p-blad-inkt: #3f6b48;
  --p-plant-donker: #3d6b34;
  --p-groen-terras: #2f7a46;
  --p-groen-donker: #2f6a47;
  --p-groen-nacht: #2f5537;
  --p-groen-fel: #1f8f4e;
  --p-olijfgroen: #7a8b2e;
  --p-excel-groen: #00b050;
  --p-neon-groen: #00e676;
  --p-rood-tint: #fde3df;
  --p-rood-tint-2: #f3d6d2;
  --p-rood-licht: #e3b7b5;
  --p-rood-zacht: #ff8e82;
  --p-neon: #ff4d3d;
  --p-neon-fel: #ff1744;
  --p-excel-rood: #ff0000;
  --p-rood-inkt: #c42b1f;
  --p-baksteen: #b0413e;
  --p-wijn-rood: #8e3330;
  --p-wijn: #832323;
  --p-rood-nacht: #7a1a12;
  --p-roze-fel: #e0457b;
  --p-blauw-tint: #e3edf3;
  --p-blauw-tint-2: #cfe1f5;
  --p-blauw-licht: #a9bbd0;
  --p-blauw: #4c78a8;
  --p-blauw-mid: #2f6c9e;
  --p-blauw-inkt: #2f5d7c;
  --p-blauw-donker: #1d4f86;
  --p-blauw-nacht: #2e4864;
  --p-indigo: #4b5fb0;
  --p-hemel: #2e88a8;
  --p-petrol: #2e8583;
  --p-petrol-2: #2e6f8e;
  --p-petrol-donker: #23706e;
  --p-paars-tint: #ddd3f0;
  --p-paars: #7a4ea3;
  --p-paars-donker: #5b3fa0;
  --p-roze: #a8457a;
  --p-hout-licht: #b89a72;
  --p-hout: #a27d55;
  --p-hout-donker: #8a6f4c;
  --p-bruin: #7b5236;
  --p-bruin-donker: #5a3a22;
  --p-salie: #9bb08a;
  /* de dagstatus van de personeelsplanner (theo-fase2.css, --pl-*): volle vlakken met hun eigen tekstkleur */
  --p-plan-groen: #4a7352;
  --p-plan-rood: #a8352b;
  --p-plan-geel: #e2c35a;
}

/* ---- 2. de rollen in het lichte thema. :root én elk element met data-theme, zodat een blok met data-theme="dark"
   (de stijlgids) zijn eigen waarden krijgt; .thema-licht = een blok dat altijd licht blijft (het rekenblad van het
   Kasboek in Barts kleuren, die voor wit papier gekozen zijn) ---- */
:root, [data-theme], .thema-licht {
  color-scheme: light;
  --wit: var(--p-wit);
  --on-chrome: var(--p-creme-1);
  --chrome-3: var(--p-inkt-3);
  --chrome-2: var(--p-inkt-2);
  --chrome: var(--p-inkt);
  --brand-2: var(--p-messing-licht);
  --brand: var(--p-messing);
  --brand-deep: var(--p-messing-diep);
  --warn: var(--p-amber);
  --ok: var(--p-blad);
  --err: var(--p-neon);
  --raised: var(--p-wit);
  --surface: var(--p-creme-0);
  --bg: var(--p-creme-1);
  --surface-2: var(--p-creme-2);
  --inset: var(--p-inset);
  --surface-3: var(--p-linnen);
  --surface-4: var(--p-zand);
  --line: var(--p-lijn);
  --line-2: var(--p-lijn-2);
  --line-3: var(--p-lijn-3);
  --line-grijs: var(--p-grijs);
  --line-strong: var(--p-lijn-sterk);
  --line-4: var(--p-lijn-4);
  --creme-mat: var(--p-creme-mat);
  --text-faint: var(--p-olijf-vaag);
  --text-olijf: var(--p-olijf);
  --text-3: var(--p-olijf-mute);
  --text-2: var(--p-olijf-inkt);
  --text-zacht: var(--p-inkt-3);
  --text: var(--p-inkt-2);
  --text-strong: var(--p-inkt);
  --zwart: var(--p-zwart);
  --steen: var(--p-steen);
  --steen-licht: var(--p-steen-licht);
  --antraciet: var(--p-antraciet);
  --leisteen: var(--p-leisteen);
  --messing-tint: var(--p-messing-tint);
  --messing-licht: var(--p-messing-licht);
  --messing: var(--p-messing);
  --brand-ink-2: var(--p-messing-donker);
  --brand-ink: var(--p-messing-inkt);
  --messing-nacht: var(--p-messing-nacht);
  --warn-bg: var(--p-amber-tint);
  --amber: var(--p-amber);
  --warn-ink: var(--p-amber-inkt);
  --oranje-tint: var(--p-oranje-tint);
  --oranje-zacht: var(--p-oranje-zacht);
  --oranje-fel: var(--p-oranje-fel);
  --oranje: var(--p-oranje);
  --oranje-donker: var(--p-oranje-donker);
  --oranje-nacht: var(--p-oranje-nacht);
  --ok-bg: var(--p-blad-tint);
  --blad-tint-2: var(--p-blad-tint-2);
  --blad-licht: var(--p-blad-licht);
  --blad-mid: var(--p-blad-mid);
  --ok-ink: var(--p-blad-inkt);
  --plant-donker: var(--p-plant-donker);
  --groen-donker: var(--p-groen-donker);
  --groen-nacht: var(--p-groen-nacht);
  --groen-fel: var(--p-groen-fel);
  --err-bg: var(--p-rood-tint);
  --rood-tint-2: var(--p-rood-tint-2);
  --rood-licht: var(--p-rood-licht);
  --rood-zacht: var(--p-rood-zacht);
  --err-ink: var(--p-rood-inkt);
  --baksteen: var(--p-baksteen);
  --wijn-rood: var(--p-wijn-rood);
  --wijn: var(--p-wijn);
  --rood-nacht: var(--p-rood-nacht);
  --info-bg: var(--p-blauw-tint);
  --blauw-tint-2: var(--p-blauw-tint-2);
  --blauw-licht: var(--p-blauw-licht);
  --info-ink: var(--p-blauw-inkt);
  --blauw-donker: var(--p-blauw-donker);
  --blauw-nacht: var(--p-blauw-nacht);
  --petrol-donker: var(--p-petrol-donker);
  --paars-donker: var(--p-paars-donker);
  --bruin-donker: var(--p-bruin-donker);
  /* afgeleide rollen */
  --on-brand: var(--p-inkt);           /* tekst op messing en op geel: altijd inkt (9,9:1) */
  --on-solid: var(--p-wit);             /* tekst op een vol statusvlak (groen, rood, blauw) */
  --sel-bg: var(--p-inkt-2);            /* de gekozen knop in een segment, tab of filter: inkt ... */
  --sel-fg: var(--p-creme-1);           /* ... met creme (in het donker omgekeerd: creme met inkt) */
  --sel-fg-2: var(--p-creme-mat);       /* tweede regel op de gekozen knop */
  --on-chrome-2: var(--p-creme-mat);    /* 10,2:1 op inkt */
  --on-chrome-3: var(--p-olijf-licht);  /* 7,1:1 op inkt */
  --focus: var(--p-messing-diep);
  --scrim: rgba(21, 18, 14, .45);
  --sheen: rgba(255, 255, 255, .55);    /* het zachte licht bovenaan een kaart */
  --shadow-card: 0 1px 2px rgba(21, 18, 14, .05), 0 18px 40px -30px rgba(21, 18, 14, .45);
  --shadow-pop: 0 2px 6px rgba(21, 18, 14, .10), 0 24px 60px -24px rgba(21, 18, 14, .55);
  --plus-shadow: var(--shadow-card);
  --plus-shadow-hover: 0 2px 6px rgba(21, 18, 14, .08), 0 22px 44px -24px rgba(21, 18, 14, .55);
  --plus-glow: 0 0 0 3px rgba(212, 175, 55, .22);
  /* type: één schaal (1rem = 16 px). Fraunces alleen voor paginatitels en grote cijfers */
  --font: "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --t-xs: .75rem; --t-s: .8125rem; --t-m: .875rem; --t-ml: .9375rem; --t-base: 1rem; --t-l: 1.125rem;
  --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 1.875rem; --t-4xl: 2.5rem;
  /* ruimte, radius, tikdoel */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-pil: 999px;
  --tap: 44px;
  /* beweging */
  --d-1: 90ms; --d-2: 160ms; --d-3: 240ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --plus-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* lagen */
  --z-kop: 30; --z-balk: 40; --z-zweef: 55; --z-menu: 75; --z-venster: 90; --z-toast: 95;
  /* maten van de schil */
  --sidebar-w: 300px; --header-h: 64px;
}

/* ---- 3. het donkere thema (UX_STIJL): dezelfde rollen, eigen waarden met hetzelfde contrast; geen
   automatische omkering van de hele pagina. Het palet (--p-*) en de vaste rollen blijven gelijk ---- */
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --chrome-3: #26211a;
  --chrome-2: #1b1712;
  --chrome: #0e0c09;
  --raised: #231e17;
  --surface: #1e1a14;
  --bg: #15120e;
  --surface-2: #2a241c;
  --inset: #191510;
  --surface-3: #2f281f;
  --surface-4: #352d22;
  --line: #3a3226;
  --line-2: #433a2c;
  --line-3: #4b4132;
  --line-grijs: #4a4236;
  --line-strong: #5a4e3c;
  --line-4: #6e624c;
  --creme-mat: #4d4222;
  --text-faint: #857b64;
  --text-olijf: #b3a57e;
  --text-3: #ada388;
  --text-2: #cfc5a8;
  --text-zacht: #e6dfca;
  --text: #f3eedc;
  --text-strong: #fbf8ea;
  --zwart: #ffffff;
  --steen: #acb2b6;
  --steen-licht: #282828;
  --antraciet: #b6b1a8;
  --leisteen: #a2b2ca;
  --messing-tint: #2d2605;
  --messing-licht: #393010;
  --messing: #d0ad42;
  --brand-ink-2: #dcbf6a;
  --brand-ink: #e6c766;
  --messing-nacht: #ceb888;
  --warn-bg: #33270f;
  --amber: #cfae4b;
  --warn-ink: #e2b55a;
  --oranje-tint: #3b270d;
  --oranje-zacht: #523923;
  --oranje-fel: #e2a348;
  --oranje: #ed9c55;
  --oranje-donker: #f39664;
  --oranje-nacht: #e4a06d;
  --ok-bg: #1f2e22;
  --blad-tint-2: #1b2f1e;
  --blad-licht: #9dbaa0;
  --blad-mid: #85c290;
  --ok-ink: #8cc49a;
  --plant-donker: #8fc185;
  --groen-donker: #85c19a;
  --groen-nacht: #94bd9b;
  --groen-fel: #6ac988;
  --err-bg: #3a1a16;
  --rood-tint-2: #402320;
  --rood-licht: #573534;
  --rood-zacht: #f98f83;
  --err-ink: #ff8a7d;
  --baksteen: #f98f87;
  --wijn-rood: #f69088;
  --wijn: #f98f87;
  --rood-nacht: #fe9484;
  --info-bg: #182733;
  --blauw-tint-2: #192d42;
  --blauw-licht: #a1b3c8;
  --info-ink: #8fbbdb;
  --blauw-donker: #80b5f3;
  --blauw-nacht: #98b5d6;
  --petrol-donker: #77c0bd;
  --paars-donker: #b4a1fc;
  --bruin-donker: #d4ad92;
  --focus: var(--brand-ink);
  --sel-bg: var(--p-creme-2);
  --sel-fg: var(--p-inkt);
  --sel-fg-2: var(--p-olijf-inkt);
  --scrim: rgba(0, 0, 0, .6);
  --sheen: rgba(255, 255, 255, 0);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -30px rgba(0, 0, 0, .8);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .85);
  --plus-shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 44px -24px rgba(0, 0, 0, .85);
}

/* ---- 4. de oude namen -> de rollen (theo.css, theo-plus.css en theo-fase2.css definieerden ze; nu alleen hier).
   De stylesheets zelf gebruiken de rollen; deze namen blijven voor de inline stijl in de tabs en de Preact-tabs.
   Op :root en [data-theme], zodat ze in een donker blok mee omschakelen. ---- */
:root, [data-theme], .thema-licht {
  --sand: var(--bg); --sand-top: var(--surface-2); --cream: var(--surface); --linen: var(--surface-3);
  --linen-line: var(--line-2); --band: var(--chrome); --band-line: rgba(212, 175, 55, .28);
  --charcoal: var(--text); --ink-soft: var(--text-2); --ink-sub: var(--text-2); --ink-mute: var(--text-3);
  --ink-faint: var(--text-faint); --olive-label: var(--text-olijf);
  --hairline: var(--line); --hairline-strong: var(--line-strong);
  --olive: var(--p-olijf); --brass: var(--brand); --brass-deep: var(--brand-deep);
  --leaf: var(--ok); --leaf-tint: var(--ok-bg); --leaf-ink: var(--ok-ink);
  --amber: var(--warn); --amber-tint: var(--warn-bg);
  --brick: var(--err-ink); --brick-tint: var(--err-bg); --wine: var(--wijn);
  --neon: var(--err); --neon-ink: var(--err-ink); --neon-tint: var(--err-bg);
  --f2-ink: var(--text-strong); --f2-ink-2: var(--text); --f2-ink-3: var(--text-zacht);
  --f2-cream: var(--bg); --f2-linen: var(--surface-3); --f2-sand: var(--surface-4);
  --f2-olive: var(--p-olijf); --f2-olive-ink: var(--text-2);
  --f2-brass: var(--brand); --f2-brass-2: var(--brand-2); --f2-brass-deep: var(--brand-deep); --f2-brass-ink: var(--brand-ink);
  --f2-on-ink: var(--on-chrome); --f2-on-ink-sub: var(--on-chrome-2); --f2-on-ink-mute: var(--on-chrome-3);
  --f2-serif: var(--font-serif); --f2-ease: var(--ease-out);
  --ux-d1: var(--d-1); --ux-d2: var(--d-2); --ux-d3: var(--d-3);
  --td-err: var(--err-ink); --td-err-bg: var(--err-bg); --td-warn: var(--warn-ink); --td-warn-bg: var(--warn-bg);
  --td-ok: var(--ok-ink); --td-ok-bg: var(--ok-bg); --td-info: var(--info-ink); --td-info-bg: var(--info-bg);
}