/* inroll-brand 1.9.0 — ontwerptokens voor ALLE inroll-oppervlakken (kassa, KDS, portaal,
   dashboards, backoffice). Bron: kai:/opt/inroll-brand. Zie BRANDBOOK.md.

   Merkregel (Harmen 12-09-2026): licht = standaard ("het goede is licht"); donker is een
   nachtmodus, warm en veilig, nooit koud-zwart. Kanariegeel = de ene krachtaccent,
   fluweelrood spaarzaam, goud voor tijd/kickers/nacht-accent, navy is de stem.

   ⚠ Het PALET heeft bewust het voorvoegsel --m- (merk). Bestaande pagina's gebruiken vaak
   zelf --ink/--gold/--navy; zonder voorvoegsel ontstond een circulaire verwijzing en viel
   de tekstkleur weg (bewezen 12-09 op de pincode-poort). Componenten gebruiken ALLEEN de
   semantische tokens hieronder (--bg, --tekst, --primair, …), nooit het palet.

   1.9.0 (05-10-2026, besluit #231010579 "uniform inroll-app-design"): DAG = optie A "Licht & geel"
   (:root), NACHT = optie N/B "navy kop, goud = hoofdactie" (html[data-theme="dark"]). De medewerker
   kiest; standaard blijft licht. Nieuwe semantische tokens voor kop, kicker, kaart, iconen, segment,
   markering en knopvorm — zodat één set .inr-componenten (inroll-ui.css) beide modi draagt.
   Ontwerp + mock-ups: ~/Claude/Werkplek/inroll-dag-nacht/ontwerp/uniform-2026-10/. */
:root{
  /* palet (vast) */
  --m-creme:#F7F3EA; --m-creme2:#EEE8DA; --m-wit:#FFFFFF; --m-navytint:#E7ECF3;
  --m-navy:#0b1e3a; --m-navy2:#102a4d; --m-n0:#060f1d; --m-n1:#081527; --m-n2:#0b1e3a; --m-n3:#102a4d;
  --m-ink:#f4efe6; --m-geel:#FFD534; --m-geel2:#F2C400; --m-goud:#c5a55a; --m-goud2:#e2c98a;
  --m-rood:#8B1E2B; --m-rood2:#A8303F; --m-groen:#2F8F5B; --m-groen2:#8fd3a5;
  --serif:"Fraunces",Georgia,serif; --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --radius:12px; --radius-l:16px; --radius-pill:999px;

  /* semantiek — LICHT (standaard) */
  --bg:var(--m-creme); --bg2:var(--m-creme2); --kaart:var(--m-wit);
  --rand:rgba(11,30,58,.10); --rand2:rgba(11,30,58,.24);
  --tekst:var(--m-navy); --dim:rgba(11,30,58,.62); --dim2:rgba(11,30,58,.5);   /* A wilde .42; .5 = net >= 3:1 voor iconen/placeholder (2.6 bij .42) */
  --primair:var(--m-geel); --primair-ink:var(--m-navy); --primair-schaduw:rgba(255,213,52,.35);
  --waarschuw-ink:#7a5c00;   /* amber als TEKST: leesbaar op licht (geel zelf is dat niet) */
  --secundair:var(--m-navy); --secundair-ink:var(--m-creme);
  --inv-bg:var(--m-navy); --inv-ink:var(--m-creme);
  --ok:var(--m-groen); --ok-ink:#fff; --ok-zacht:rgba(47,143,91,.12); --ok-tekst:#1f6b43; --info:#1b5fd9; --waarschuw:var(--m-geel2); --waarschuw-zacht:rgba(255,213,52,.25);
  --gevaar:var(--m-rood); --gevaar-zacht:rgba(139,30,43,.10);
  /* accent = goud; in licht iets dieper zodat het ook als TEKST leesbaar is (kickers/labels),
     --accent-lijn blijft het lichte goud voor randen en versiering. */
  --accent:#86681f; --accent-lijn:var(--m-goud);   /* 1.9.0: #8f6f22 -> #86681f, haalde 4.5:1 niet op crème (4.25) */
  --schaduw:0 8px 28px rgba(11,30,58,.10); --backdrop:rgba(11,30,58,.45);
  /* doorschijnende vlakken: tegels/toetsen/lijsten laten de sfeer door, tekst blijft vol */
  --vlak:rgba(255,255,255,.5); --vlak2:rgba(255,255,255,.72); --vlak-rand:rgba(11,30,58,.10);

  /* uniform app-design (1.9.0) — DAG = optie A. Waarom aparte tokens i.p.v. de bestaande hergebruiken:
     --schaduw blijft voor zwevende lagen (sheet/toast), kaarten krijgen de lichtere --kaart-schaduw;
     --vlak2 blijft "doorschijnend wit vlak", de neutrale navy-tint van A heet --tint. */
  --kop-bg:var(--m-wit); --kop-ink:var(--m-navy); --kop-rand:rgba(11,30,58,.10);
  --kicker-ink:var(--accent); --kicker-letter:var(--sans); --titel-maat:26px;
  --kaart-rand:rgba(11,30,58,.08); --kaart-schaduw:0 2px 10px rgba(11,30,58,.05);
  --hero-bg:var(--m-wit); --hero-rand:rgba(197,165,90,.55); --hero-streep:var(--m-geel);
  --rond-rand:rgba(11,30,58,.18); --rond-bg:transparent;
  --seg-strook:var(--m-wit); --seg-aan-bg:var(--m-navy); --seg-aan-ink:var(--m-creme); --seg-radius:10px;
  --tint:rgba(11,30,58,.05); --chip-bg:rgba(11,30,58,.06); --chip-ink:var(--m-navy);
  --ico-bg:rgba(197,165,90,.16); --ico-ink:var(--accent); --ico-radius:12px;
  --markeer-bg:rgba(255,213,52,.22); --markeer-lijn:var(--m-geel2);
  --actie-bg:rgba(247,243,234,.94);
  --kn-hoogte:52px; --kn-radius:12px;
  --groot-font:700 30px/1.1 var(--sans); --sectie-font:600 19px/1.2 var(--serif);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:var(--m-n1); --bg2:var(--m-n0); --kaart:var(--m-n2);
  --rand:rgba(244,239,230,.12); --rand2:rgba(244,239,230,.26);
  --tekst:var(--m-ink); --dim:rgba(244,239,230,.64); --dim2:rgba(244,239,230,.42);
  --primair:var(--m-goud); --primair-ink:var(--m-n1); --primair-schaduw:rgba(197,165,90,.28);
  --waarschuw-ink:var(--m-geel);
  --secundair:#1d3d6b; --secundair-ink:var(--m-ink);
  --inv-bg:var(--m-ink); --inv-ink:var(--m-n1);
  --ok:var(--m-groen); --ok-ink:var(--m-ink); --ok-zacht:rgba(47,143,91,.20); --ok-tekst:#7fd1a1; --info:#7fb0ff; --waarschuw:var(--m-geel); --waarschuw-zacht:rgba(255,213,52,.14);
  /* rood in de nacht iets lichter: fluweelrood op navy is als TEKST niet leesbaar */
  --gevaar:#e2707d; --gevaar-zacht:rgba(168,48,63,.20); --accent:var(--m-goud2); --accent-lijn:var(--m-goud);
  --schaduw:0 8px 28px rgba(0,0,0,.35); --backdrop:rgba(6,15,29,.6);
  --vlak:rgba(244,239,230,.05); --vlak2:rgba(244,239,230,.09); --vlak-rand:rgba(244,239,230,.10);

  /* uniform app-design (1.9.0) — NACHT = optie N (B-kop op de nachttokens): bijna-zwarte navy kop,
     gouden mono-kicker, grotere titel, goud = hoofdactie (geel verblindt in een donkere zaak),
     ronde knoppen en iconen. Staat klaar; aan gaat pas in stap 2 (inroll-thema.js + app-schil). */
  --kop-bg:var(--m-n0); --kop-ink:var(--m-ink); --kop-rand:rgba(197,165,90,.22);
  --kicker-ink:var(--m-goud); --kicker-letter:"JetBrains Mono",ui-monospace,monospace; --titel-maat:32px;
  --kaart-rand:rgba(197,165,90,.20); --kaart-schaduw:0 4px 16px rgba(0,0,0,.30);
  --hero-bg:linear-gradient(160deg,var(--m-n3),var(--m-n2)); --hero-rand:rgba(197,165,90,.45); --hero-streep:transparent;
  --rond-rand:rgba(244,239,230,.22); --rond-bg:rgba(244,239,230,.06);
  --seg-strook:var(--m-n0); --seg-aan-bg:var(--m-goud); --seg-aan-ink:var(--m-n1); --seg-radius:999px;
  --tint:rgba(244,239,230,.07); --chip-bg:rgba(197,165,90,.16); --chip-ink:var(--m-goud2);
  --ico-bg:var(--m-n0); --ico-ink:var(--m-goud); --ico-radius:50%;
  --markeer-bg:rgba(197,165,90,.16); --markeer-lijn:var(--m-goud);
  --actie-bg:rgba(8,21,39,.94);
  --kn-radius:999px;
  --groot-font:600 32px/1.1 var(--serif);
  color-scheme:dark;
}