/* UNIK inkoop, richting "Rode inkt": tokens, reset en typografie.
   Rood (het karmijn van het logo) is rode inkt: het betekent altijd "aandacht", nooit decoratie.
   Alle tekstkleuren halen AA op hun achtergrond. */

:root {
  /* schil */
  --zij: #0f1217;
  --zij-actief: #1e232b;
  --zij-hover: #171b21;
  --zij-lijn: #252a33;
  --zij-tekst: #a6adb8;
  --zij-tekst-sterk: #f3f4f6;
  --zij-tekst-zwak: #868e9a;

  /* werkvlak */
  --vlak: #f1f2f4;
  --paneel: #ffffff;
  --paneel-2: #f7f8f9;
  --lijn: #dcdfe4;
  --lijn-sterk: #b9bfc8;
  --lijn-zacht: #eceef1;
  --inkt: #13161b;
  --inkt-2: #454d59;
  --inkt-3: #5d6571;

  /* betekenis */
  --rood: #b11738;
  --rood-vlak: #fcedf0;
  --geel: #8a4b00;
  --geel-merk: #c77c00;
  --geel-vlak: #fdf2e0;
  --groen: #1b6a43;
  --groen-merk: #23875a;
  --groen-vlak: #e6f3ec;
  --blauw: #2b5a93;
  --blauw-vlak: #e9f0f8;
  --focus: #2e6db4;

  /* grafieken (gevalideerd, kleurenblind-veilig) */
  --serie-lijst: #2e6db4;
  --serie-kost: #0e8a74;
  --serie-neutraal: #a3abb6;
  --serie-staaf: #5b6675;

  /* type */
  --letter: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-label: 11px;
  --t-klein: 12.5px;
  --t-basis: 14px;
  --t-tabel: 13.5px;
  --t-titel: 28px;
  --t-cijfer: 30px;
  --t-cijfer-groot: 44px;
  --breed-cijfer: 112%;
  --breed-label: 104%;

  /* ruimte en maat */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 24px;
  --r-7: 32px;
  --r-8: 48px;
  --straal: 6px;
  --straal-klein: 4px;
  --zijbalk: 236px;
  --inhoud-max: 1240px;
  --rij: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vlak);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-basis);
  line-height: 1.5;
  letter-spacing: 0.003em;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: var(--t-titel); line-height: 1.15; font-weight: 640; letter-spacing: -0.015em; font-stretch: 104%; overflow-wrap: anywhere; }
h3 { font-size: 13.5px; font-weight: 650; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
em { color: var(--inkt-3); font-style: normal; }
strong { font-weight: 620; }
code, pre { font-family: var(--mono); font-size: 0.89em; letter-spacing: 0; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sla-over { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--inkt); color: #fff; padding: 8px 14px; border-radius: var(--straal-klein); }
.sla-over:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-size: 0.89em; letter-spacing: 0; }
.tech { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; color: var(--inkt-2); }
.nw { white-space: nowrap; }
.zacht, .sub { color: var(--inkt-3); font-size: 12px; line-height: 1.4; }
.uitleg { color: var(--inkt-2); font-size: 13px; max-width: 70ch; }
.hulp { color: var(--inkt-3); font-size: 12.5px; }
.ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-s { width: 14px; height: 14px; }
.k-rood { color: var(--rood); }
.k-let { color: var(--geel-merk); }
.k-goed { color: var(--groen-merk); }
.k-info { color: var(--blauw); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}