/* ==========================================================================
   Fairwind V2 — ontwerptokens
   Fase 2, stap 1. Twee registers, één merk.
   register "klant"     = de app (Richten…Instellingen): rustig, institutioneel.
   register "deelnemer" = kaartje op de telefoon + kiosk: warm, groot.

   Regels die in deze tokens vastliggen
   - Elke kleur bestaat op kale :root (licht). Donker herdefinieert alleen waarden,
     onder @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) én
     onder :root[data-theme="dark"]. Nooit een kleur die alleen in één blok bestaat.
   - Dataweergave volgt de dataviz-methode. Het categorische palet is gevalideerd met
     scripts/validate_palette.js (zie § Data, onderaan, voor de uitslagen).
   - "onder de vloer" is géén kleur maar een arcering: een onderdrukte cel mag nooit
     op een kleine waarde lijken.
   - Richtingsbanden (gestegen/gelijk/gedaald) zijn kleurloos. Richting is geen
     waardeoordeel; polariteit bepaalt of een stijging gunstig is.
   - "bevroren" bestaat niet in V2 (geen slot, alleen samenvoegen) — geen token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webfonts — zelf gehost (V2lite S1), nooit van een derde partij
   Bron: @fontsource-variable/fraunces@5.3.0 en @fontsource/ibm-plex-{sans,mono}@5.3.0
   (Latin-subset, woff2), licentie SIL OFL 1.1 in fonts/OFL-*.txt. Fraunces is één variabel
   bestand met de assen opsz, wght, SOFT en WONK. Geserveerd via de witte lijst STATISCH.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/fraunces-5.3.0-latin-full-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-5.3.0-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-5.3.0-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-5.3.0-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-5.3.0-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-5.3.0-latin-500-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Typografie — drie families, twee registers
   Fraunces is één variabele serif die beide registers bedient:
   klant SOFT 0 / WONK 0 (sober), deelnemer SOFT 70 / WONK 1 (warm, ronde vormen).
   -------------------------------------------------------------------------- */
:root {
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* variabele-as-instellingen per register */
  --serif-as: "SOFT" 0, "WONK" 0;
  --serif-gewicht: 560;

  /* schaal — klant (institutioneel, dicht) */
  --tekst-xs: 0.75rem;     /* 12px — celvoetnoot, redencode */
  --tekst-s: 0.8125rem;    /* 13px — label, tabelkop */
  --tekst-m: 0.9375rem;    /* 15px — lopende tekst */
  --tekst-l: 1.0625rem;    /* 17px — introtekst */
  --tekst-xl: 1.375rem;    /* 22px — kopje */
  --tekst-2xl: 1.75rem;    /* 28px — paginakop */
  --tekst-3xl: 2.25rem;    /* 36px — paginakop groot */

  /* cijfers — de tabelcijfers zijn het beeld van de klant-app */
  --cijfer-s: 1.125rem;
  --cijfer-m: 1.75rem;
  --cijfer-l: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);

  --regel-dicht: 1.3;
  --regel-normaal: 1.55;
  --regel-ruim: 1.7;
  --spatie-label: 0.06em;

  /* --------------------------------------------------------------------------
     2. Ruimte, radius, lijn, schaduw
     -------------------------------------------------------------------------- */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4rem;

  --goot: 1rem;               /* minimale zijmarge, elke breedte */
  --tik: 2.75rem;             /* (J5) kleinste raakvlak op een smal scherm: 44 px (WCAG 2.5.5) */
  --kolom-max: 71.25rem;      /* 1140px — klant-app */
  --lees-max: 38rem;          /* lopende tekst, ±65 tekens */

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-rond: 999px;

  --lijn-dun: 1px;
  --lijn-dik: 2px;

  --schaduw-0: none;
  --schaduw-1: 0 1px 2px rgba(20, 24, 21, 0.06), 0 0 0 1px rgba(20, 24, 21, 0.04);
  --schaduw-2: 0 8px 24px rgba(20, 24, 21, 0.10), 0 0 0 1px rgba(20, 24, 21, 0.06);

  --duur-1: 120ms;
  --duur-2: 220ms;
  --soepel: cubic-bezier(0.2, 0, 0.1, 1);

  /* --------------------------------------------------------------------------
     3. Register "klant" — licht (standaard op :root)
     Veel wit, één accentkleur, dunne lijnen.
     -------------------------------------------------------------------------- */
  --vlak-grond: #fcfcfa;      /* paginavlak */
  --vlak-1: #ffffff;          /* kaart */
  --vlak-2: #f5f6f3;          /* rustige band, tabelzebra */
  --vlak-3: #eceee9;          /* gevulde chip */
  --vlak-omkeer: #141815;     /* inverse blok */

  --ink-1: #141815;           /* 17,9:1 op wit */
  --ink-2: #4c534d;           /* 7,9:1 */
  --ink-3: #686f69;           /* 5,2:1 op wit, 4,7:1 op goud-zacht — label, as, hulptekst (JU 1/11: was #767d77, 4,2:1) */
  --ink-omkeer: #f4f6f2;

  --lijn-1: #e2e5df;          /* haarlijn */
  --lijn-2: #cfd4cc;          /* tabelscheiding, as */
  --lijn-3: #aab1a8;          /* nadruk */

  --accent: #0c5d4e;          /* 7,8:1 op wit — actie, link, actief */
  --accent-diep: #094136;
  --accent-ink: #ffffff;
  --accent-was: #e6f0ec;      /* rustige vulling */
  --accent-rand: #b9d4cb;

  --focus: #0c5d4e;
  --focus-ring: 0 0 0 2px var(--vlak-1), 0 0 0 4px var(--focus);

  /* --------------------------------------------------------------------------
     4. Data — betekenis (beide registers gelijk)
     Twee polen + neutrale kern. De polen dragen valentie ná polariteit:
     gunstig = de kant die het pack als gunstig aanmerkt, nooit "hoog".
     -------------------------------------------------------------------------- */
  --data-gunstig: #0e6d5a;        /* 6,3:1 op wit */
  --data-gunstig-licht: #79bfb0;  /* 2,1:1 — vulling, altijd met label */
  --data-neutraal: #d9d6cc;       /* 1,5:1 — vulling, altijd met haarlijn */
  --data-ongunstig-licht: #d89a73;
  --data-ongunstig: #a34b1f;      /* 5,9:1 op wit */

  /* V2lite L5, Lezen: bold en weinig tekst. Eén plek om bij te sturen (kleuren volgen de --data-* tokens). */
  --n-mega: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);   /* het kerncijfer */
  --n-balk: 1rem;                                  /* hoogte van de balk van de Aanbevelingsscore */
  --n-bol: 1.3rem;                                 /* een bolletje van de drie getallen */
  --n-kaart-radius: var(--n-radius);                /* alias; nieuw werk gebruikt --n-radius */

  /* V2lite S1, de v10-laag (ontwerp O:445-451). Merkgoud uit het logo: alleen vlak en lijn, nooit tekst op wit. */
  --n-goud: #FFD665;
  --n-goud-zacht: #fff4cf;
  --n-groot: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);  /* het grote cijfer */
  --n-radius: 14px;
  --n-ruimte: 1.5rem;
  --n-rand: var(--lijn-1);

  --sem-gunstig: #0e6d5a;
  --sem-neutraal: #6e736c;
  --sem-aandacht: #b0461e;        /* 5,6:1 — aandachtskaart, waarschuwing */
  --sem-aandacht-was: #f6e9e2;
  --sem-aandacht-rand: #e2b79f;

  /* categorische slots — alleen voor identiteit (welke groep), nooit voor waarde.
     Volgorde is de CVD-veiligheid; niet herschikken. Altijd met directe labels. */
  --serie-1: #118a72;
  --serie-2: #b08a0e;
  --serie-3: #7d3f86;
  --serie-4: #c2612f;
  --serie-5: #3e6fa8;

  /* onder de vloer: arcering, geen waarde-kleur */
  --onder-vloer-ink: #9aa199;
  --onder-vloer-vlak: repeating-linear-gradient(
      45deg, transparent 0 5px, rgba(118, 125, 119, 0.28) 5px 6px);
  --onder-vloer-rand: #c3c9c1;

  /* richtingsband — kleurloos; de pijl draagt de richting */
  --band-ink: var(--ink-2);
  --band-vlak: var(--vlak-2);
  --band-rand: var(--lijn-2);

  /* grafiekchroom */
  --grafiek-vlak: var(--vlak-1);
  --grafiek-raster: #ebeee9;
  --grafiek-as: #cfd4cc;
  --grafiek-tussen: var(--vlak-1);   /* 2px tussenruimte tussen vullingen */
}

/* --------------------------------------------------------------------------
   5. Register "deelnemer" — licht
   Gebroken wit, aardetinten, ronde vormen, grote raakvlakken.
   Het accent is hetzelfde pine als in de klant-app: dat is de merkband.
   -------------------------------------------------------------------------- */
[data-register="deelnemer"] {
  --serif-as: "SOFT" 70, "WONK" 1;
  --serif-gewicht: 480;

  --tekst-m: 1.0625rem;
  --tekst-l: 1.1875rem;
  --tekst-xl: 1.4375rem;
  --tekst-2xl: clamp(1.75rem, 1.3rem + 2.1vw, 2.375rem);
  --tekst-3xl: clamp(2.125rem, 1.5rem + 3.1vw, 3rem);
  --regel-normaal: 1.6;

  --radius-2: 10px;
  --radius-3: 20px;

  --kolom-max: 34rem;
  --goot: 1.25rem;

  /* V2lite L2, de kaart op de gsm: bold en weinig tekst. Eén plek om bij te sturen (geen kleuren: die volgen het register). */
  --n-vraag: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem);   /* de vraag op een scherm */
  --n-knop: 3.25rem;                                  /* minimale hoogte van een antwoordknop */
  --n-gat: 1.25rem;                                   /* ruimte tussen vraag en antwoorden */
  --n-radius: 14px;
  --n-radius-groot: 18px;                             /* de grote groepsknop */

  --vlak-grond: #efede2;     /* papier */
  --vlak-1: #f8f6ee;         /* kaart */
  --vlak-2: #e7e4d6;
  --vlak-3: #dcd8c7;
  --vlak-omkeer: #241f18;

  --ink-1: #241f18;          /* 13,9:1 op papier */
  --ink-2: #57503f;          /* 6,8:1 */
  --ink-3: #6b6453;
  --ink-omkeer: #f6f1e6;

  --lijn-1: #ded9c9;
  --lijn-2: #cbc4ae;
  --lijn-3: #aea590;

  --accent-was: #e2ebe4;
  --accent-rand: #b2ccc1;
  --focus-ring: 0 0 0 3px var(--vlak-1), 0 0 0 6px var(--focus);

  /* aardetinten — alleen voor de afdruk en de terugkoppelkaart */
  --aarde-leem: #8c6a4a;
  --aarde-mos: #5c6b45;
  --aarde-oker: #b0791f;
  --aarde-turf: #3e322a;

  --schaduw-1: 0 1px 2px rgba(36, 31, 24, 0.07);
  --schaduw-2: 0 10px 30px rgba(36, 31, 24, 0.12);

  --onder-vloer-ink: #8c8570;
  --onder-vloer-vlak: repeating-linear-gradient(
      45deg, transparent 0 5px, rgba(125, 117, 99, 0.30) 5px 6px);
  --onder-vloer-rand: #c9c1aa;

  --grafiek-vlak: var(--vlak-1);
  --grafiek-raster: #e4e0d0;
  --grafiek-as: #cbc4ae;
  --grafiek-tussen: var(--vlak-1);
}

/* --------------------------------------------------------------------------
   6. Donker — OS-voorkeur (een expliciete lichtkeuze wint)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vlak-grond: #101311;
    --vlak-1: #171a18;
    --vlak-2: #1e221f;
    --vlak-3: #262b27;
    --vlak-omkeer: #f2f5f1;

    --ink-1: #f2f5f1;        /* 16,0:1 op #171a18 */
    --ink-2: #b4bcb5;        /* 9,0:1 */
    --ink-3: #9aa29b;        /* 6,7:1; 4,8:1 op goud-zacht (JU 1/11: was #889089) */
    --ink-omkeer: #141815;

    --lijn-1: #272c28;
    --lijn-2: #333a35;
    --lijn-3: #4a534c;

    --accent: #57b9a5;       /* 7,4:1 op #171a18 */
    --accent-diep: #7fd0bf;
    --accent-ink: #0b1512;
    --accent-was: #16302a;
    --accent-rand: #2b5a4f;
    --n-goud-zacht: #3a3220;

    --focus: #57b9a5;
    --focus-ring: 0 0 0 2px var(--vlak-1), 0 0 0 4px var(--focus);

    --data-gunstig: #3aa893;
    --data-gunstig-licht: #2c6f62;
    --data-neutraal: #3a3e39;
    --data-ongunstig-licht: #8c503a;
    --data-ongunstig: #ce6c3c;

    --sem-gunstig: #3aa893;
    --sem-neutraal: #9aa096;
    --sem-aandacht: #e08055;
    --sem-aandacht-was: #33201a;
    --sem-aandacht-rand: #6b3b2a;

    --serie-1: #3aa893;
    --serie-2: #b98d14;
    --serie-3: #a879c4;
    --serie-4: #ce6c3c;
    --serie-5: #5e8dcb;

    --onder-vloer-ink: #7b837c;
    --onder-vloer-vlak: repeating-linear-gradient(
        45deg, transparent 0 5px, rgba(136, 144, 137, 0.30) 5px 6px);
    --onder-vloer-rand: #3d453f;

    --grafiek-raster: #232824;
    --grafiek-as: #333a35;
    --grafiek-tussen: var(--vlak-1);

    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --schaduw-2: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  }

  :root:not([data-theme="light"]) [data-register="deelnemer"] {
    --vlak-grond: #1b1713;
    --vlak-1: #241f1a;
    --vlak-2: #2e2821;
    --vlak-3: #3a3229;
    --vlak-omkeer: #f2ece1;

    --ink-1: #f2ece1;        /* 13,9:1 op #241f1a */
    --ink-2: #bdb3a2;        /* 7,9:1 */
    --ink-3: #9d9483;
    --ink-omkeer: #241f1a;

    --lijn-1: #362f26;
    --lijn-2: #473e32;
    --lijn-3: #5e5344;

    --accent-was: #1f3129;
    --accent-rand: #2f5449;

    --aarde-leem: #c39468;
    --aarde-mos: #8ea065;
    --aarde-oker: #d7a33a;
    --aarde-turf: #cdbfae;

    --onder-vloer-ink: #8d8474;
    --onder-vloer-vlak: repeating-linear-gradient(
        45deg, transparent 0 5px, rgba(148, 139, 122, 0.32) 5px 6px);
    --onder-vloer-rand: #4a4134;

    --grafiek-raster: #322b23;
    --grafiek-as: #473e32;
  }
}

/* --------------------------------------------------------------------------
   7. Donker — expliciete keuze van de lezer (wint in beide richtingen)
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --vlak-grond: #101311;
  --vlak-1: #171a18;
  --vlak-2: #1e221f;
  --vlak-3: #262b27;
  --vlak-omkeer: #f2f5f1;

  --ink-1: #f2f5f1;
  --ink-2: #b4bcb5;
  --ink-3: #9aa29b;
  --ink-omkeer: #141815;

  --lijn-1: #272c28;
  --lijn-2: #333a35;
  --lijn-3: #4a534c;

  --accent: #57b9a5;
  --accent-diep: #7fd0bf;
  --accent-ink: #0b1512;
  --accent-was: #16302a;
  --accent-rand: #2b5a4f;
  --n-goud-zacht: #3a3220;

  --focus: #57b9a5;
  --focus-ring: 0 0 0 2px var(--vlak-1), 0 0 0 4px var(--focus);

  --data-gunstig: #3aa893;
  --data-gunstig-licht: #2c6f62;
  --data-neutraal: #3a3e39;
  --data-ongunstig-licht: #8c503a;
  --data-ongunstig: #ce6c3c;

  --sem-gunstig: #3aa893;
  --sem-neutraal: #9aa096;
  --sem-aandacht: #e08055;
  --sem-aandacht-was: #33201a;
  --sem-aandacht-rand: #6b3b2a;

  --serie-1: #3aa893;
  --serie-2: #b98d14;
  --serie-3: #a879c4;
  --serie-4: #ce6c3c;
  --serie-5: #5e8dcb;

  --onder-vloer-ink: #7b837c;
  --onder-vloer-vlak: repeating-linear-gradient(
      45deg, transparent 0 5px, rgba(136, 144, 137, 0.30) 5px 6px);
  --onder-vloer-rand: #3d453f;

  --grafiek-raster: #232824;
  --grafiek-as: #333a35;
  --grafiek-tussen: var(--vlak-1);

  --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --schaduw-2: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

:root[data-theme="dark"] [data-register="deelnemer"] {
  --vlak-grond: #1b1713;
  --vlak-1: #241f1a;
  --vlak-2: #2e2821;
  --vlak-3: #3a3229;
  --vlak-omkeer: #f2ece1;

  --ink-1: #f2ece1;
  --ink-2: #bdb3a2;
  --ink-3: #9d9483;
  --ink-omkeer: #241f1a;

  --lijn-1: #362f26;
  --lijn-2: #473e32;
  --lijn-3: #5e5344;

  --accent-was: #1f3129;
  --accent-rand: #2f5449;

  --aarde-leem: #c39468;
  --aarde-mos: #8ea065;
  --aarde-oker: #d7a33a;
  --aarde-turf: #cdbfae;

  --onder-vloer-ink: #8d8474;
  --onder-vloer-vlak: repeating-linear-gradient(
      45deg, transparent 0 5px, rgba(148, 139, 122, 0.32) 5px 6px);
  --onder-vloer-rand: #4a4134;

  --grafiek-raster: #322b23;
  --grafiek-as: #473e32;
}

/* --------------------------------------------------------------------------
   8. Toetsvlakken — één thema afdwingen, los van de voorkeur van de lezer
   Gebruikt door het stijlblad (licht en donker naast elkaar) en door een
   afdruk die licht moet blijven.

   Het attribuut staat tweemaal in elke selector. Dat is geen typfout: zonder
   die herhaling weegt [data-toets="licht"] (0,1,0) lichter dan
   :root:not([data-theme="light"]) (0,2,0) en dan :root[data-theme="dark"], en
   verliest hetzelfde voor het deelnemerregister — een toetsvlak of een afdruk
   bleef dan donker. Met de herhaling wegen ze gelijk en wint dit blok, omdat
   het later in dit bestand staat. Houd dit blok dus ná de thema-blokken.
   -------------------------------------------------------------------------- */
[data-toets="licht"][data-toets="licht"],
[data-toets="licht"][data-toets="licht"] [data-register="klant"] {
  --vlak-grond: #fcfcfa; --vlak-1: #ffffff; --vlak-2: #f5f6f3; --vlak-3: #eceee9;
  --vlak-omkeer: #141815;
  --ink-1: #141815; --ink-2: #4c534d; --ink-3: #686f69; --ink-omkeer: #f4f6f2;
  --lijn-1: #e2e5df; --lijn-2: #cfd4cc; --lijn-3: #aab1a8;
  --accent: #0c5d4e; --accent-diep: #094136; --accent-ink: #ffffff;
  --accent-was: #e6f0ec; --accent-rand: #b9d4cb; --focus: #0c5d4e; --n-goud-zacht: #fff4cf;
  --data-gunstig: #0e6d5a; --data-gunstig-licht: #79bfb0; --data-neutraal: #d9d6cc;
  --data-ongunstig-licht: #d89a73; --data-ongunstig: #a34b1f;
  --sem-gunstig: #0e6d5a; --sem-neutraal: #6e736c; --sem-aandacht: #b0461e;
  --sem-aandacht-was: #f6e9e2; --sem-aandacht-rand: #e2b79f;
  --serie-1: #118a72; --serie-2: #b08a0e; --serie-3: #7d3f86; --serie-4: #c2612f; --serie-5: #3e6fa8;
  --onder-vloer-ink: #9aa199; --onder-vloer-rand: #c3c9c1;
  --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(118,125,119,.28) 5px 6px);
  --grafiek-raster: #ebeee9; --grafiek-as: #cfd4cc; --grafiek-tussen: #ffffff;
  --schaduw-1: 0 1px 2px rgba(20,24,21,.06), 0 0 0 1px rgba(20,24,21,.04);
  --schaduw-2: 0 8px 24px rgba(20,24,21,.10), 0 0 0 1px rgba(20,24,21,.06);
  color-scheme: light;
}
[data-toets="licht"][data-toets="licht"] [data-register="deelnemer"],
[data-toets="licht"][data-toets="licht"][data-register="deelnemer"] {
  --vlak-grond: #efede2; --vlak-1: #f8f6ee; --vlak-2: #e7e4d6; --vlak-3: #dcd8c7;
  --vlak-omkeer: #241f18;
  --ink-1: #241f18; --ink-2: #57503f; --ink-3: #6b6453; --ink-omkeer: #f6f1e6;
  --lijn-1: #ded9c9; --lijn-2: #cbc4ae; --lijn-3: #aea590;
  --accent-was: #e2ebe4; --accent-rand: #b2ccc1;
  --aarde-leem: #8c6a4a; --aarde-mos: #5c6b45; --aarde-oker: #b0791f; --aarde-turf: #3e322a;
  --onder-vloer-ink: #8c8570; --onder-vloer-rand: #c9c1aa;
  --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(125,117,99,.30) 5px 6px);
  --grafiek-raster: #e4e0d0; --grafiek-as: #cbc4ae; --grafiek-tussen: #f8f6ee;
}
[data-toets="donker"][data-toets="donker"],
[data-toets="donker"][data-toets="donker"] [data-register="klant"] {
  --vlak-grond: #101311; --vlak-1: #171a18; --vlak-2: #1e221f; --vlak-3: #262b27;
  --vlak-omkeer: #f2f5f1;
  --ink-1: #f2f5f1; --ink-2: #b4bcb5; --ink-3: #9aa29b; --ink-omkeer: #141815;
  --lijn-1: #272c28; --lijn-2: #333a35; --lijn-3: #4a534c;
  --accent: #57b9a5; --accent-diep: #7fd0bf; --accent-ink: #0b1512;
  --accent-was: #16302a; --accent-rand: #2b5a4f; --focus: #57b9a5; --n-goud-zacht: #3a3220;
  --data-gunstig: #3aa893; --data-gunstig-licht: #2c6f62; --data-neutraal: #3a3e39;
  --data-ongunstig-licht: #8c503a; --data-ongunstig: #ce6c3c;
  --sem-gunstig: #3aa893; --sem-neutraal: #9aa096; --sem-aandacht: #e08055;
  --sem-aandacht-was: #33201a; --sem-aandacht-rand: #6b3b2a;
  --serie-1: #3aa893; --serie-2: #b98d14; --serie-3: #a879c4; --serie-4: #ce6c3c; --serie-5: #5e8dcb;
  --onder-vloer-ink: #7b837c; --onder-vloer-rand: #3d453f;
  --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(136,144,137,.30) 5px 6px);
  --grafiek-raster: #232824; --grafiek-as: #333a35; --grafiek-tussen: #171a18;
  --schaduw-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  --schaduw-2: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  color-scheme: dark;
}
[data-toets="donker"][data-toets="donker"] [data-register="deelnemer"],
[data-toets="donker"][data-toets="donker"][data-register="deelnemer"] {
  --vlak-grond: #1b1713; --vlak-1: #241f1a; --vlak-2: #2e2821; --vlak-3: #3a3229;
  --vlak-omkeer: #f2ece1;
  --ink-1: #f2ece1; --ink-2: #bdb3a2; --ink-3: #9d9483; --ink-omkeer: #241f1a;
  --lijn-1: #362f26; --lijn-2: #473e32; --lijn-3: #5e5344;
  --accent-was: #1f3129; --accent-rand: #2f5449;
  --aarde-leem: #c39468; --aarde-mos: #8ea065; --aarde-oker: #d7a33a; --aarde-turf: #cdbfae;
  --onder-vloer-ink: #8d8474; --onder-vloer-rand: #4a4134;
  --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(148,139,122,.32) 5px 6px);
  --grafiek-raster: #322b23; --grafiek-as: #473e32; --grafiek-tussen: #241f1a;
}


/* --------------------------------------------------------------------------
   9. Afdruk — papier is licht
   Een pagina die in donkere modus staat, drukt anders donker af: onleesbaar op
   papier en een bak inkt. Dit blok zet het lichte palet terug voor élke pagina,
   zonder dat een pagina er iets voor hoeft te doen. Alleen een element dat zelf
   op donker staat (de donkerkolom van het stijlblad) blijft donker.
   Specificiteit: :root:not():not() = 0,3,0, dus het wint van het donkerblok.
   -------------------------------------------------------------------------- */
@media print {
  :root:not([data-toets="donker"]):not([data-toets="donker"]),
  :root:not([data-toets="donker"]):not([data-toets="donker"]) [data-register="klant"]:not([data-toets="donker"]) {
    --vlak-grond: #fcfcfa; --vlak-1: #ffffff; --vlak-2: #f5f6f3; --vlak-3: #eceee9;
    --vlak-omkeer: #141815;
    --ink-1: #141815; --ink-2: #4c534d; --ink-3: #686f69; --ink-omkeer: #f4f6f2;
    --lijn-1: #e2e5df; --lijn-2: #cfd4cc; --lijn-3: #aab1a8;
    --accent: #0c5d4e; --accent-diep: #094136; --accent-ink: #ffffff;
    --accent-was: #e6f0ec; --accent-rand: #b9d4cb; --focus: #0c5d4e; --n-goud-zacht: #fff4cf;
    --data-gunstig: #0e6d5a; --data-gunstig-licht: #79bfb0; --data-neutraal: #d9d6cc;
    --data-ongunstig-licht: #d89a73; --data-ongunstig: #a34b1f;
    --sem-gunstig: #0e6d5a; --sem-neutraal: #6e736c; --sem-aandacht: #b0461e;
    --sem-aandacht-was: #f6e9e2; --sem-aandacht-rand: #e2b79f;
    --serie-1: #118a72; --serie-2: #b08a0e; --serie-3: #7d3f86; --serie-4: #c2612f; --serie-5: #3e6fa8;
    --onder-vloer-ink: #9aa199; --onder-vloer-rand: #c3c9c1;
    --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(118,125,119,.28) 5px 6px);
    --grafiek-raster: #ebeee9; --grafiek-as: #cfd4cc; --grafiek-tussen: #ffffff;
    --schaduw-0: none; --schaduw-1: none; --schaduw-2: none;
    color-scheme: light;
  }
  :root:not([data-toets="donker"]):not([data-toets="donker"]) [data-register="deelnemer"]:not([data-toets="donker"]) {
    --vlak-grond: #efede2; --vlak-1: #f8f6ee; --vlak-2: #e7e4d6; --vlak-3: #dcd8c7;
    --vlak-omkeer: #241f18;
    --ink-1: #241f18; --ink-2: #57503f; --ink-3: #6b6453; --ink-omkeer: #f6f1e6;
    --lijn-1: #ded9c9; --lijn-2: #cbc4ae; --lijn-3: #aea590;
    --accent-was: #e2ebe4; --accent-rand: #b2ccc1;
    --aarde-leem: #8c6a4a; --aarde-mos: #5c6b45; --aarde-oker: #b0791f; --aarde-turf: #3e322a;
    --onder-vloer-ink: #8c8570; --onder-vloer-rand: #c9c1aa;
    --onder-vloer-vlak: repeating-linear-gradient(45deg, transparent 0 5px, rgba(125,117,99,.30) 5px 6px);
    --grafiek-raster: #e4e0d0; --grafiek-as: #cbc4ae; --grafiek-tussen: #f8f6ee;
  }
}

/* ==========================================================================
   § Data — uitslagen van de validator (dataviz-skill,
     scripts/validate_palette.js, 22/9/2026)

   Categorisch, licht, vlak #ffffff, aangrenzende paren (staaf/lijn/stapel):
     lichtheidsband PASS · chroma PASS · CVD PASS ΔE 11,1 (protan)
     normaal zicht PASS ΔE 18,1 · contrast PASS (alle ≥ 3:1)
   Categorisch, licht, alle paren, eerste drie slots (spreiding/kaart):
     alles PASS, CVD ΔE 11,1 — vanaf vier slots valt het weg: gebruik dan
     "overige" of kleine veelvouden, geen extra kleur.
   Categorisch, donker, vlak #171a18, aangrenzend:
     alles PASS, CVD ΔE 12,9 · normaal zicht ΔE 17,1
   Categorisch, donker, alle paren, eerste drie: alles PASS, CVD ΔE 8,2.

   Divergerende armen als ordinale ramp (validate --ordinal):
     gunstig licht  #79bfb0 → #0e6d5a  PASS (licht-einde 2,12:1, hue-spreiding 5°)
     ongunstig licht #d89a73 → #a34b1f PASS (2,39:1, 9°)
     gunstig donker #2c6f62 → #3aa893  PASS (2,97:1, 1°)
     ongunstig donker #8c503a → #ce6c3c PASS (2,78:1, 4°)
   De neutrale kern (#d9d6cc / #3a3e39) is bewust grijs en laag in contrast:
   ze betekent "geen kant". Ze krijgt altijd een haarlijn en 2px tussenruimte,
   anders verdwijnt ze in het vlak.

   Vullingen onder 3:1 (--data-neutraal, --data-*-licht) dragen nooit betekenis
   alleen: elke verdeelbalk heeft zichtbare klassenlabels én een tabelweergave.
   ========================================================================== */