/* Grafiet — de ontwerptokens van Begrotingsblik, hier hergebruikt.
   ===============================================================

   Dit blok is overgenomen uit `app/src/assets/base.css` van begrotingsblik,
   inclusief het commentaar. Dat commentaar is met opzet meegekomen: het draagt
   de metingen waar de waarden op rusten — dE2000-afstanden, de simulatie van
   deuteranopie, de contrastcijfers tegen --surface. Zonder die tekst is de
   volgende wijziging aan --text-muted een gok in plaats van een keuze.

   Bij tegenspraak wint het origineel in begrotingsblik.

   De regel waar alles uit volgt:
     het instrument is grijs, zodat de meting kleur mag hebben.
*/

/* Het instrument is grijs, zodat de meting kleur mag hebben.

   Hiervoor was blauw de kleur van de interface: menu-items, filterpillen,
   tegeliconen en links waren allemaal #3b82f6. Dat gaf drie problemen. Het
   oogde speels waar dit product bestuurlijk hoort te zijn. Het zei overal
   hetzelfde, namelijk niets — een blauw menu-item betekent niet meer dan een
   blauwe pil. En het botste met de data: --accent (#3b82f6) en --serie-1
   (#3987e5) liggen op dE2000 3,1 in het donkere thema, dus een actieve pil en
   de eerste grafieklijn waren praktisch dezelfde kleur.

   Nu is de hele interface één neutrale grafietladder en dragen alleen de
   grafiekreeksen, de statuskleuren en het KRW-oordeel nog kleur — precies de
   plekken waar kleur iets betekent, en precies de plekken die al getoetst
   zijn. Een toestand wordt aangegeven met helderheid in plaats van kleur:
   rust → muis erop → gekozen → gekozen met muis erop klimt in het donkere
   thema omhoog en zakt in het lichte weg, in beide gevallen met minstens
   1,2:1 per trede zodat elke stap zichtbaar is.

   De neutralen zijn bewust op dezelfde lichtheid gehouden als het oude
   slate-palet (binnen 2%), zodat de reeks- en KRW-kleuren hun getoetste
   contrast tegen --surface behouden: contrast is een lichtheidsrelatie, niet
   een kleurrelatie. Alleen de blauwzweem is eruit.

   Let op bij het wijzigen: --text-muted mag nooit op --hover of --kies staan
   (respectievelijk 3,4:1 en 2,6:1). De hover-regel zet daarom expliciet
   color: var(--text). */
:root {
  color-scheme: dark;
  --bg: #15171c;
  --surface: #26282f;
  --surface2: #2f323b;
  --border: #3c4049;
  /* De rand van iets waar de muis op staat of dat gekozen is. Zelfstandig
     3:1 tegen --bg, --surface én --surface2, want nu blauw wegvalt is de rand
     een van de weinige aanwijzingen dat iets bedienbaar is. */
  --border-sterk: #747b89;
  --text: #f2f3f5;
  --text-muted: #9aa0ab;
  /* --accent en --accent-light houden hun naam zodat de 58 bestaande gebruiken
     blijven werken, maar hun rol is omgekeerd: van merkkleur naar contrastpool.
     --accent is het uiterste einde van de ladder, tegenover --bg. */
  --accent: #e2e5ea;
  --accent-light: #f5f6f8;
  /* Nodig zodra --accent bijna wit is: vijf plekken schrijven
     `background: var(--accent); color: #fff`, en dat wordt onleesbaar. */
  --accent-contrast: #15171c;
  /* De vier treden van de bedieningsladder. */
  --hover: #454a56;
  --kies: #565c6a;
  --kies-hover: #646b7a;
  /* Twee focusringen van tegengestelde toon. De lichte zakt pas onder 3:1 bij
     een ondergrond met L > 0,265, de donkere pas bij L < 0,126; die gebieden
     raken elkaar niet, dus er is geen ondergrond waarop beide wegvallen. */
  --focus: #f2f3f5;
  --focus-tegen: #15171c;
  /* De onderstreping onder een tekstlink. Kleur draagt links niet meer, dus
     de vorm doet dat: 3,9:1 op --surface, ruim boven de 3:1 voor een lijn. */
  --link-onder: #7e8492;
  /* Statuskleuren: groen is voordelig of op koers, rood is nadelig of een
     overschrijding, oranje is let op.
     Dit waren de standaardkleuren van Tailwind — fel, verzadigd, verkeerslicht.
     Nu een ingetogen pijnboomgroen, een dieprood en een gebrande oker: de
     kleuren van een jaarverslag in plaats van een stoplicht.

     Het is niet alleen een kwestie van smaak geworden. De oude combinatie had
     een echt gebrek: na simulatie van deuteranopie — de meest voorkomende vorm
     van kleurenblindheid — lagen groen (#22c55e) en rood (#f87171) op dE2000
     1,9 uit elkaar in dít thema. Dat is praktisch dezelfde kleur, terwijl ze
     tegengestelde betekenis dragen. Nu is dat 10,5.

     De tweede drager is lichtheid: groen is bewust lichter dan rood, met een
     L*-gat van 17 tegen 6 eerder. Dat gat werkt ook waar kleur helemaal
     wegvalt — op een zwart-witafdruk van een raadsstuk.

     Gemeten tegen --surface / --surface2 / --bg: groen 9,15 / 7,96 / 11,15 ·
     rood 5,48 / 4,77 / 6,68 · oranje 7,68 / 6,68 / 9,36. Alle boven de 4,5
     voor tekst en de 3,0 voor een stip. */
  --green: #99dab6;
  --red: #e6808b;
  --orange: #f3ad61;
  /* Reekskleuren voor grafieken met meerdere gebieden naast elkaar. Vaste
     volgorde, nooit doorgedraaid: een reeks houdt zijn kleur ook als er een
     andere gemeente actief wordt of er een reeks wegvalt. Acht slots is het
     maximum; daarboven wordt een reeks gedempt getekend in plaats van dat er
     een negende kleur bij wordt verzonnen.
     Gecontroleerd tegen --surface in beide modi op lichtheid, chroma,
     kleurenblindheid (protan/deutan/tritan) en onderling verschil. Drie
     lichte slots halen geen 3:1 tegen wit; daarom staat onder elke grafiek
     ook de tabel met alle gebieden — kleur is nooit de enige drager. */
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --serie-7: #9085e9;
  --serie-8: #e66767;
  /* KRW-eindoordeel als schaal in plaats van als drie kleuren. Vijf klassen
     op drie kleuren afbeelden maakt 'matig' en 'ontoereikend' identiek, en
     dat zijn juist de twee waar het gesprek over gaat.
     Twee eenkleurige verlopen, gesplitst op de norm: wat niet aan de goede
     toestand voldoet is rood, wat er wel aan voldoet groen. Geen regenboog en
     geen grijs middelpunt — 'matig' is niet neutraal, het is onvoldoende.
     Elke helft is met scripts/validate_palette.js --ordinal getoetst op één
     tint, oplopende lichtheid met zichtbare stappen, en genoeg contrast met
     --surface. Deze waarden vullen vlakken op de kaart; het woord staat er
     altijd naast, dus kleur draagt nooit alleen de betekenis. */
  --krw-slecht: #ff8f8f;
  --krw-ontoereikend: #e06a6a;
  --krw-matig: #b85252;
  --krw-goed: #4ade80;
  --krw-zeer-goed: #16a34a;
  /* Vormschaal. De hoeken waren ad hoc gegroeid: 8px, 999px, 4px, 50%, 10px,
     6px, 5px, 3px, 2px en 12px door elkaar. Vier treden nu, en volronde
     pillen alleen nog waar iets écht een cirkel is (stippen, avatars).
     De namen zijn Nederlands en niet --radius-*: die namespace was van
     Tailwind, en al is die laag nu weg, de Nederlandse namen sluiten aan bij
     de rest van de tokens hier. */
  --hoek-xs: 2px;   /* kleurvierkantjes in legenda's, code-tags */
  --hoek-sm: 4px;   /* alles wat bedienbaar is: knoppen, pillen, velden, badges */
  --hoek: 6px;      /* vlakken: kaarten, tegels, menu-items, meldingen */
  --hoek-lg: 10px;  /* grote containers: het chatpaneel, logo's, foto's */
  --sidebar-w: 240px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface2: #eaebee;
  --border: #d3d5da;
  --border-sterk: #7f8590;
  --text: #15171c;
  --text-muted: #5b5f68;
  --accent: #1b1e24;
  --accent-light: #0e1116;
  --accent-contrast: #ffffff;
  --hover: #d4d7dd;
  --kies: #bfc3cb;
  --kies-hover: #adb2bc;
  --focus: #15171c;
  --focus-tegen: #ffffff;
  --link-onder: #7f8590;
  --green: #347152;
  --red: #8c2432;
  --orange: #965617;
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;
  --krw-slecht: #991b1b;
  --krw-ontoereikend: #c2410c;
  --krw-matig: #d97706;
  --krw-goed: #15803d;
  --krw-zeer-goed: #065f46;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface2: #eaebee;
    --border: #d3d5da;
    --border-sterk: #7f8590;
    --text: #15171c;
    --text-muted: #5b5f68;
    --accent: #1b1e24;
    --accent-light: #0e1116;
    --accent-contrast: #ffffff;
    --hover: #d4d7dd;
    --kies: #bfc3cb;
    --kies-hover: #adb2bc;
    --focus: #15171c;
    --focus-tegen: #ffffff;
    --link-onder: #7f8590;
    --green: #347152;
    --red: #8c2432;
    --orange: #965617;
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --serie-4: #eda100;
    --serie-5: #e87ba4;
    --serie-6: #008300;
    --serie-7: #4a3aa7;
    --serie-8: #e34948;
    --krw-slecht: #991b1b;
    --krw-ontoereikend: #c2410c;
    --krw-matig: #d97706;
    --krw-goed: #15803d;
    --krw-zeer-goed: #065f46;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Typografie ───────────────────────────────────────────────────────────
   De ontwerptaal legde kleur, hoeken en helderheidstreden vast, maar niet de
   letter. Dat is te zien: er staan tien verschillende `line-height`-waarden in
   de app — 1.6 veertig keer, 1.5 zestien keer, en dan 1.65, 1.55, 1.7, 1.45,
   1.35, 1.4, 1.3 en 1.1 in de marge. Dat zijn geen keuzes maar tien keer
   dezelfde bedoeling, met de hand geraden. Naast elkaar op één scherm zie je
   het meteen: een alinea die losser staat dan de lijst eronder.

   Drie treden is genoeg voor dit dashboard:
     --regel-strak   koppen en tabellen, waar regels bij elkaar horen
     --regel         lopende tekst, de standaard
     --regel-ruim    lange leesteksten (changelog, handleiding, hulp)

   De waarden staan bewust dicht bij de 1.5/1.6 die er al het meest stonden,
   zodat overstappen geen herontwerp is maar het opruimen van ruis. */
:root {
  --regel-cijfer: 1.2;   /* grote getallen: een KPI-waarde van 24px */
  --regel-strak: 1.35;   /* koppen, tabellen, korte labels */
  --regel: 1.55;         /* lopende tekst — de standaard, staat op body */
  --regel-ruim: 1.7;     /* lange leesteksten: changelog, uitleg, hulp */

  /* DE REGELLENGTE, EN WAAROM ÉÉN WAARDE IN `ch`.
     Een regel van rond de 70 tekens leest het prettigst; langer en het oog
     verliest de terugweg naar het begin van de volgende regel.

     Hier stonden zes waarden door elkaar — 70, 72, 76, 78, 80 en 120ch — plus
     een absolute 900px op de changelog. Dat laatste was de echte fout: `ch`
     schaalt mee met de lettergrootte, `px` niet. De uitleg bovenaan een pagina
     staat op 12px, dus 72ch is daar ~590px; de changelog stond op 13px met een
     absolute 900px, oftewel ~100ch. Twee blokken onder elkaar in dezelfde
     kaart, de een half zo breed als de ander — en de bovenste leek daardoor
     veel te smal voor de pagina.

     Eén maat, in tekens en niet in pixels, zodat elk blok dezelfde regellengte
     leest ongeacht zijn lettergrootte. */
  --maat: 72ch;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: var(--regel);
  background: var(--bg);
  color: var(--text);
}

/* FORMULIERVELDEN ERVEN DE LETTER NIET VANZELF, EN DAT IS EEN BROWSERREGEL.
   `input`, `textarea`, `select` en `button` krijgen van de browser hun eigen
   lettertype en 13.33px, ongeacht wat er op `body` staat. Deze codebase
   repareerde dat per geval: tien losse `font-family: inherit` voor zeven
   textarea's en een reeks inputs. Waar iemand het vergat — en dat gebeurde,
   laatst in het beheerscherm — staat de browserstandaard midden in het
   ontwerp.

   `font:` en niet `font-family:`: dan komt de lettergrootte mee. Dat is de
   tweede helft van hetzelfde probleem en de reden dat invoervelden altijd net
   iets kleiner oogden dan de tekst ernaast.

   Monospace blijft een uitzondering met een eigen token; zie --mono. */
input, textarea, select, button { font: inherit; }

/* Voor wat werkelijk als code of ruwe invoer gelezen moet worden: de
   CSV-invoer in Beheer en de voorbeelden in de hulpteksten. Eén plek, zodat de
   stack niet in elk bestand opnieuw wordt uitgeschreven. */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Links. Kleur draagt ze niet meer, dus de vorm doet dat: een onderstreping
   die losstaat van de letters en bij hover dikker wordt en de tekstkleur
   aanneemt. Dat voldoet aan WCAG 1.4.1 én werkt beter dan het oude blauw, dat
   voor kleurenblinde lezers op een blauwe interface niets zei.
   Alleen échte tekstlinks krijgen de streep. Menu-items, tegels en de
   versieregel zijn ook <a>, maar dat zijn vlakken met eigen aanwijzingen; in
   deze codebase valt die scheiding samen met wel/geen class-attribuut.
   :where() zet de specificiteit op nul, zodat scoped componentregels winnen. */
a { color: var(--text); }
a:where(:not([class])) {
  text-decoration: underline;
  text-decoration-color: var(--link-onder);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:where(:not([class])):hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}