/* GEGENEREERD uit ontwerp/tokens.json — niet met de hand wijzigen.
 * Opnieuw maken:  node ontwerp/genereer-css.mjs
 * Bron: Eyefly Dataportaal v1
 */
:root, [data-theme="light"] {
  --canvas: #f3f4f8;
  --surface: #ffffff;
  --surface-sunken: #e9ebf2;
  --surface-raised: #ffffff;
  --ink: #171530;
  --ink-muted: #4a4e6b;
  --ink-subtle: #64688a;
  --ink-on-brand: #ffffff;
  --ink-on-navy: #ffffff;
  --line: rgba(23,21,48,.13);
  --line-strong: rgba(23,21,48,.24);
  --line-control: rgba(23,21,48,.50);
  --brand-blue: #00a0e6;
  --brand-navy: #2e2276;
  --brand-purple: #642085;
  --action: #2e2276;
  --action-hover: #3b2d94;
  --accent-ink: #006c9c;
  --accent-surface: rgba(0,108,156,.10);
  --critical-ink: #b01f38;
  --critical-surface: rgba(176,31,56,.10);
  --warning-ink: #8a5200;
  --warning-surface: rgba(138,82,0,.10);
  --success-ink: #0a6b4c;
  --success-surface: rgba(10,107,76,.10);
  --new-ink: #642085;
  --new-surface: rgba(100,32,133,.10);
  --scrim: rgba(23,21,48,.55);
  --stage: #0a0917;
  --chrome-surface: rgba(16,14,33,.94);
  --chrome-surface-strong: rgba(8,7,20,.90);
  --chrome-ink: #f0f1f7;
  --chrome-ink-muted: #bcc2da;
  --chrome-ink-subtle: #969cba;
  --chrome-line: rgba(255,255,255,.40);
  --chrome-accent: #4fc3f2;
  --chrome-critical-ink: #ff9aa9;
  --chrome-hover: rgba(255,255,255,.10);
  --shadow-card: 0 1px 2px rgba(23,21,48,.06);
  --shadow-raised: 0 6px 20px -8px rgba(23,21,48,.22);
  --shadow-dialog: 0 24px 60px -24px rgba(23,21,48,.34);
}
[data-theme="dark"] {
  --canvas: #0e0c1e;
  --surface: #191733;
  --surface-sunken: #0a0917;
  --surface-raised: #221f40;
  --ink: #f0f1f7;
  --ink-muted: #a8adca;
  --ink-subtle: #9096b4;
  --ink-on-brand: #0b1026;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);
  --line-control: rgba(255,255,255,.42);
  --action: #00a0e6;
  --action-hover: #33b5ec;
  --accent-ink: #4fc3f2;
  --accent-surface: rgba(79,195,242,.14);
  --critical-ink: #ff9aa9;
  --critical-surface: rgba(255,154,169,.14);
  --warning-ink: #f0bd77;
  --warning-surface: rgba(240,189,119,.14);
  --success-ink: #63d3aa;
  --success-surface: rgba(99,211,170,.14);
  --new-ink: #c79ae6;
  --new-surface: rgba(199,154,230,.14);
  --scrim: rgba(6,5,16,.72);
  --shadow-card: none;
  --shadow-raised: 0 6px 20px -8px rgba(0,0,0,.70);
  --shadow-dialog: 0 24px 60px -24px rgba(0,0,0,.85);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --font-display: Outfit, system-ui, sans-serif;
  --font-sans: "Work Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
.title-xl {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.title-lg {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.title-md {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.data-lg {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.data {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.data-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}