/* UNIK inkoop: tokens, reset en typografie.
   Het ontwerp is licht: warm papier als werkvlak, een lichte zijbalk in de kleur van het bureaublad en de inhoud als een vel
   daarop. Druif (--accent) is voor wat je kunt aanklikken. Rood (het karmijn van het logo) is rode inkt: het betekent altijd
   "aandacht", nooit decoratie. Alle tekstkleuren halen AA op hun achtergrond.
   Rustig (sinds 1.0): vlakke panelen met een haarlijn, geen gekleurde gloed, geen vlak in een vlak. Wat goed is, blijft stil;
   alleen een afwijking krijgt een vlak of een kleur. */

:root {
  /* schil: licht, in de kleur van het bureaublad */
  --zij: #ece8e1;
  --zij-actief: #ffffff;
  --zij-hover: #e2ddd4;
  --zij-lijn: #d9d3c8;
  --zij-tekst: #4d4740;
  --zij-tekst-sterk: #1c1917;
  --zij-tekst-zwak: #6e675f;
  --zij-focus: #5b35c7;

  /* werkvlak: warm papier */
  --vlak: #f8f6f2;
  --paneel: #ffffff;
  --paneel-2: #f7f5f1;
  --lijn: #e5e0d7;
  --lijn-sterk: #cbc4b8;
  --lijn-zacht: #efebe4;
  --inkt: #1c1917;
  --inkt-2: #4a443d;
  --inkt-3: #6b645c;

  /* accent: druif, naar het paars uit het logo; voor knoppen, actieve filters en de pagina waar je bent */
  --accent: #5b35c7;
  --accent-sterk: #47279f;
  --accent-vlak: #efeafd;

  /* betekenis */
  --rood: #c61f41;
  --rood-sterk: #a8173a; /* de gevaar-knop als je erop wijst */
  --rood-vlak: #fdeaee;
  --geel: #8a5300;
  --geel-merk: #e39a05;
  --geel-vlak: #fff2d2;
  --groen: #0c7646;
  --groen-merk: #11a363;
  --groen-vlak: #dff6ea;
  --blauw: #2253bf;
  --blauw-vlak: #e7eefd;
  --focus: #5b35c7;
  --op-kleur: #ffffff; /* tekst en vulling op een gekleurd of donker vlak */

  /* 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-mini: 12px;
  --t-ui: 13px;
  --t-basis: 14px;
  --t-kop: 16px;
  --t-sectie: 20px;
  --t-titel: 26px;
  --t-titel-smal: 22px;
  --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: 14px;
  --straal-klein: 10px;
  --straal-rond: 999px;
  --schaduw: 0 1px 2px rgba(28, 25, 23, 0.04);
  --schaduw-op: 0 2px 4px rgba(28, 25, 23, 0.06), 0 16px 40px -12px rgba(28, 25, 23, 0.22);
  --zijbalk: 250px;
  --inhoud-max: 1240px;
  --rij: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zij);
  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: 720; letter-spacing: -0.015em; font-stretch: 102%; overflow-wrap: anywhere; }
h3 { font-size: var(--t-ui); 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; }
/* een link naar een blok (#controle, #achter) landt onder de vaste bovenbalk, en het blok laat even zien dat het bedoeld is */
[id] { scroll-margin-top: calc(64px + var(--r-4)); }
.paneel:target { border-color: var(--accent); }
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: var(--op-kleur); 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: var(--t-mini); overflow-wrap: anywhere; color: var(--inkt-2); }
.nw { white-space: nowrap; }
.zacht, .sub { color: var(--inkt-3); font-size: var(--t-mini); line-height: 1.4; }
.uitleg { color: var(--inkt-2); font-size: var(--t-ui); max-width: 70ch; }
.hulp { color: var(--inkt-3); font-size: var(--t-mini); }
.ic { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; stroke: none; } /* Remix Icon: gevulde paden, dus kleur via fill */
.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; }
}