/* tokens.css — Kleur- en typografie-tokens Valenti website v2.
   Waarden en contrastvalidatie: zie markdown/design-tokens.md.
   Dark-mode is default (klantwens); light-mode via [data-theme="light"].

   AUGUSTUS 2026 — neutrale basiskleuren. De antraciet-tinten hadden een
   blauw/paarse cast (#16151a, #201d26, #2b2733) waardoor de achtergrond
   'paars aanliep' en vloekte met de roze/paarse dienst-iconen. Ze zijn
   vervangen door echt neutrale grijstinten (gelijke R/G/B). Idem voor de
   tekstkleuren. De merkkleuren uit het logo zijn ONGEWIJZIGD — het paars
   blijft dus wél het accent, alleen niet meer in de ondergrond.
   Alle combinaties opnieuw doorgerekend: alles ≥ 7:1 (WCAG AAA). */

:root {
    /* Merkkleuren (Valenti-paars, uit logo) — ongewijzigd */
    --paars-900: #510739;
    --paars-600: #8a1a5c;
    --paars-500: #e85a9b;
    --paars-400: #f494be;
    --paars-100: #fad3e5;

    /* Neutraal antraciet (dark-mode basis) — geen kleurcast */
    --antraciet-900: #171717;  /* pagina-achtergrond */
    --antraciet-800: #1f1f1f;  /* kaarten/surface */
    --antraciet-700: #252525;  /* verhoogde surface / hover */

    /* Zilver & neutraal — geen kleurcast */
    --zilver-300: #bdbdbd;
    --wit: #f5f5f5;
    --zilver-100: #f2f2f2;

    /* Semantische tokens (dark-mode default) */
    --kleur-achtergrond: var(--antraciet-900);
    --kleur-surface: var(--antraciet-800);
    --kleur-tekst: var(--wit);
    --kleur-tekst-gedempt: var(--zilver-300);
    --kleur-accent: var(--paars-400);
    --kleur-accent-fill: var(--paars-900);
    --kleur-focus-ring: var(--paars-400);
    /* Verhoogde laag bovenop surface (submenu's, hover-states). Semantisch,
       zodat hij met het thema meeschakelt — een rauw paletkleur-token als
       achtergrond gaf in het lichte thema een zwart vlak (bug 2026-08-18).
       In de leesbaarheidsmodus volgt hij vanzelf de daar aangepaste
       --antraciet-700. Donker niet lichter maken dan #252525 (contrasteis). */
    --kleur-surface-verhoogd: var(--antraciet-700);
    /* Tekst óp een accent-fill-vlak. Donker: fill is paars-900 -> wit erop.
       Licht: fill is paars-400 (#f494be, lichtroze) -> wit was daar vrijwel
       onzichtbaar (1,96:1, bug 2026-08-18); paars-900 haalt er 6,3:1. */
    --kleur-accent-fill-tekst: var(--wit);
    /* Randen van kaarten en panelen. Semantisch, om dezelfde reden als
       --kleur-surface-verhoogd: een rauw paletkleur-token schakelt niet mee met
       het thema. Donker: dezelfde tint als de verhoogde laag. */
    --kleur-rand: var(--antraciet-700);
    /* Succes/fout (statusbadges e.d.) — in licht donkerder varianten, anders
       zakt het contrast op wit onder de eis (groen was daar 2,27:1). */
    --kleur-succes: #3fb950;
    --kleur-fout: #e5534b;

    /* Sterkte van het WebGL-aurora-effect (effects-webgl.js leest dit).
       De aurora licht de achtergrond op en dat kost tekstcontrast. Sinds de
       overstap van roze naar Valenti-paars is er meer ruimte: paars is donkerder,
       dus bij de felste tint (#9e38b8) en maximale ruis houdt de bodytekst
       8,75:1 — ruim AAA. 120 is tevens de bovengrens die de shader hanteert
       (uInt wordt geklemd op 1,2). Bij een lichtere kleur opnieuw doorrekenen. */
    /* Reekskleuren voor de grafieken van de managementrapportage.
       Zes onderling onderscheidbare tinten; deze set is voor de DONKERE
       weergave en houdt op --antraciet-900 minstens 3:1 (WCAG-eis voor
       niet-tekstuele elementen zoals staven en lijnen). */
    --kleur-reeks-1: #4d9dff;
    --kleur-reeks-2: #ff8a4c;
    --kleur-reeks-3: #35c48b;
    --kleur-reeks-4: #b48cff;
    --kleur-reeks-5: #e0b234;
    --kleur-reeks-6: #ff77b0;

    --dot-intensity: 120;
}

:root[data-theme="light"] {
    --kleur-achtergrond: var(--zilver-100);
    --kleur-surface: #ffffff;
    --kleur-tekst: var(--paars-900);
    --kleur-tekst-gedempt: #4a4a4a;
    --kleur-accent: var(--paars-900);
    --kleur-accent-fill: var(--paars-400);
    --kleur-focus-ring: var(--paars-900);
    /* Verhoogde laag op wit surface: zilver-100; paars-900-tekst houdt 12,9:1. */
    --kleur-surface-verhoogd: var(--zilver-100);
    --kleur-accent-fill-tekst: var(--paars-900);
    /* Zichtbare maar rustige rand op wit; donkerder dan zilver-100, dat als
       vlak wordt gebruikt en dus geen rand kan markeren. */
    --kleur-rand: #d0d0d0;
    --kleur-succes: #1a7f37;  /* 4,7:1 op wit */
    --kleur-fout: #b42318;    /* 6,3:1 op wit */

    /* Donkerdere reekskleuren: op wit hebben de bovenstaande tinten te weinig
       contrast voor staven en lijnen. Deze houden allemaal minstens 3:1. */
    --kleur-reeks-1: #1e63c4;
    --kleur-reeks-2: #b04310;
    --kleur-reeks-3: #0f7a53;
    --kleur-reeks-4: #6b46c1;
    --kleur-reeks-5: #7d5a00;
    --kleur-reeks-6: #b32a68;
}

/* === Leesbaarheidsmodus in DONKERE weergave: geel op zwart ===
   Maximaal contrast (19,56:1) — de klassieke combinatie voor slechtziendheid.
   Alleen actief als de leesbaarheidsmodus aanstaat én het thema donker is;
   in lichte weergave blijft de eigen licht-behandeling gelden. */
:root[data-readable="true"]:not([data-theme="light"]) {
    --antraciet-900: #000000;
    --antraciet-800: #000000;
    --antraciet-700: #141414;   /* subtiele laagscheiding, geel blijft 18,4:1 */
    --kleur-tekst: #ffff00;
    --kleur-tekst-gedempt: #ffff00;
    --kleur-accent: #ffff00;
    --kleur-focus-ring: #ffffff;
    --kleur-accent-fill: #000000;
    /* Op zwart is een grijze rand onzichtbaar; geel houdt de kaders herkenbaar. */
    --kleur-rand: #ffff00;
}

body {
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-size: 1.125rem;
    line-height: 1.5;
}