/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-neutraal-50: #f2f7f3;
  --primitive-color-neutraal-300: #b0b6b1;
  --primitive-color-neutraal-400: #858c87;
  --primitive-color-neutraal-500: #4a5a51;
  --primitive-color-neutraal-700: #1d3a2b;
  --primitive-color-neutraal-800: #12291d;
  --primitive-color-neutraal-900: #0a1a12;
  --primitive-color-neutraal-950: #050e09;
  --primitive-color-groen-600: #00522e;
  --primitive-color-groen-700: #004225;
  --primitive-color-groen-900: #04180f;
  --primitive-color-oranje-400: #ff8a3d;
  --primitive-color-oranje-500: #ff6301;
  --primitive-color-oranje-600: #e05400;
  --primitive-color-mint-300: #79f2c0;
  --primitive-color-mint-400: #45d9a4;
  --primitive-color-mint-600: #2bb383;
  --primitive-color-amber-400: #ffd166;
  --primitive-color-amber-500: #ffc247;
  --primitive-color-amber-600: #e0a32e;
  --primitive-color-rood-300: #ff8fa3;
  --primitive-color-rood-400: #ff6b7d;
  --primitive-color-rood-600: #e5455a;
  --primitive-color-data-limoen: #c8f24e;
  --primitive-color-data-roze: #ffb3d9;
  --primitive-color-data-blauw: #5ec6ff;
  --primitive-color-data-violet: #b39dff;
  --primitive-color-data-overig: #7a8a84;
  --primitive-color-papier-vel: #ffffff;
  --primitive-color-papier-vlak: #eef4f0;
  --primitive-color-papier-rand: #d3ded7;
  --primitive-color-papier-tekst2: #4a5a51;
  --primitive-color-papier-oranje: #c24400;
  --primitive-ruimte-0: 0;
  --primitive-ruimte-1: 4px;
  --primitive-ruimte-2: 8px;
  --primitive-ruimte-3: 12px;
  --primitive-ruimte-4: 16px;
  --primitive-ruimte-5: 20px;
  --primitive-ruimte-6: 24px;
  --primitive-ruimte-8: 32px;
  --primitive-ruimte-10: 40px;
  --primitive-ruimte-12: 48px;
  --primitive-ruimte-16: 64px;
  --primitive-ruimte-24: 96px;
  --primitive-ruimte-32: 128px;
  --primitive-tekstgrootte-mono-klein: 0.594rem;
  --primitive-tekstgrootte-mono: 0.656rem;
  --primitive-tekstgrootte-mono-groot: 0.719rem;
  --primitive-tekstgrootte-klein: 0.875rem;
  --primitive-tekstgrootte-basis: 1rem;
  --primitive-tekstgrootte-lead: 1.0625rem;
  --primitive-tekstgrootte-h4: 1.3125rem;
  --primitive-tekstgrootte-h3: 1.6875rem;
  --primitive-tekstgrootte-cijfer: 2.875rem;
  --primitive-tekstgrootte-h2: clamp(2.125rem, 5.4vw, 4.625rem);
  --primitive-tekstgrootte-h1: clamp(3.25rem, 9.6vw, 9.125rem);
  --primitive-regelafstand-strak: 0.84;
  --primitive-regelafstand-kop: 0.9;
  --primitive-regelafstand-cijfer: 1;
  --primitive-regelafstand-tekst: 1.5;
  --primitive-regelafstand-ruim: 1.6;
  --primitive-regelafstand-los: 1.9;
  --primitive-letterafstand-h1: -0.035em;
  --primitive-letterafstand-h2: -0.03em;
  --primitive-letterafstand-h3: -0.02em;
  --primitive-letterafstand-h4: -0.015em;
  --primitive-letterafstand-normaal: 0;
  --primitive-letterafstand-knop: 0.07em;
  --primitive-letterafstand-nav: 0.09em;
  --primitive-letterafstand-label: 0.16em;
  --primitive-woordafstand-kop: 0.12em;
  --primitive-woordafstand-normaal: normal;
  --primitive-lettertype-display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --primitive-lettertype-serif: "Instrument Serif", Georgia, serif;
  --primitive-lettertype-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --primitive-lettertype-tekst: system-ui, -apple-system, "Segoe UI", sans-serif;
  --primitive-gewicht-normaal: 400;
  --primitive-gewicht-medium: 500;
  --primitive-gewicht-vet: 700;
  --primitive-radius-geen: 0;
  --primitive-radius-kaart: 12px;
  --primitive-radius-pil: 100px;
  --primitive-lijndikte-haar: 1px;
  --primitive-lijndikte-accent: 2px;
  --primitive-lijndikte-rail: 3px;
  --primitive-dekking-rand: 0.14;
  --primitive-dekking-randSterk: 0.30;
  --primitive-dekking-tertiair: 0.54;
  --primitive-dekking-secundair: 0.72;
  --primitive-dekking-uit: 0.38;
  --primitive-duur-kort: 0.2s;
  --primitive-duur-basis: 0.35s;
  --primitive-duur-lang: 0.6s;
  --primitive-duur-band: 30s;
  --primitive-duur-spook: 44s;
  --primitive-versoepeling-merk: cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-versoepeling-lineair: linear;
}

/* === SEMANTIC === */
:root {
  --kleur-grond: #050e09;
  --kleur-verhoogd: #0a1a12;
  --kleur-vlak: #004225;
  --kleur-vlak-hover: #00522e;
  --kleur-papier: #ffffff;
  --kleur-tekst: #f2f7f3;
  --kleur-tekst-secundair: #b0b6b1;
  --kleur-tekst-tertiair: #858c87;
  --kleur-tekst-uit: #4a5a51;
  --kleur-inkt: #04180f;
  --kleur-actie: #ff6301;
  --kleur-actie-hover: #e05400;
  --kleur-actie-op-vlak: #ff8a3d;
  --kleur-op-actie: #04180f;
  --kleur-vanzelf: #45d9a4;
  --kleur-vanzelf-vol: #2bb383;
  --kleur-op-vanzelf: #04180f;
  --kleur-rand: rgba(242, 247, 243, 0.14);
  --kleur-rand-sterk: rgba(242, 247, 243, 0.30);
  --kleur-focus: #45d9a4;
  --kleur-op-papier: #04180f;
  --kleur-papier-vlak: #eef4f0;
  --kleur-papier-rand: #d3ded7;
  --kleur-papier-tekst-secundair: #4a5a51;
  --kleur-actie-op-papier: #c24400;
  --kleur-vanzelf-op-papier: #004225;
  --kleur-goed: #45d9a4;
  --kleur-waarschuwing: #ffd166;
  --kleur-fout: #ff6b7d;
  --kleur-fout-op-vlak: #ff8fa3;
  --kleur-goed-vol: #2bb383;
  --kleur-waarschuwing-vol: #e0a32e;
  --kleur-fout-vol: #e5455a;
  --ruimte-krap: 8px;
  --ruimte-component: 16px;
  --ruimte-kaart: 24px;
  --ruimte-blok: 40px;
  --ruimte-sectie: 96px;
  --ruimte-gutter: 40px;
  --tekst-kop-familie: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --tekst-accent-familie: "Instrument Serif", Georgia, serif;
  --tekst-label-familie: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --tekst-lees-familie: system-ui, -apple-system, "Segoe UI", sans-serif;
  --tekst-grootte-h1: clamp(3.25rem, 9.6vw, 9.125rem);
  --tekst-grootte-h2: clamp(2.125rem, 5.4vw, 4.625rem);
  --tekst-grootte-h3: 1.6875rem;
  --tekst-grootte-h4: 1.3125rem;
  --tekst-grootte-cijfer: 2.875rem;
  --tekst-grootte-lead: 1.0625rem;
  --tekst-grootte-basis: 1rem;
  --tekst-grootte-klein: 0.875rem;
  --tekst-grootte-label: 0.656rem;
  --tekst-grootte-label-klein: 0.594rem;
  --tekst-grootte-label-groot: 0.719rem;
  --tekst-regel-strak: 0.84;
  --tekst-regel-kop: 0.9;
  --tekst-regel-tekst: 1.5;
  --tekst-regel-ruim: 1.6;
  --tekst-spatie-h1: -0.035em;
  --tekst-spatie-h2: -0.03em;
  --tekst-spatie-h3: -0.02em;
  --tekst-spatie-h4: -0.015em;
  --tekst-spatie-label: 0.16em;
  --tekst-spatie-nav: 0.09em;
  --tekst-woord-kop: 0.12em;
  --tekst-accent-marge: 0.22em;
  --tekst-maat-lees: 62ch;
  --tekst-maat-inleiding: 52ch;
  --tekst-maat-kop: 15ch;
  --beweging-duur: 0.35s;
  --beweging-duur-kort: 0.2s;
  --beweging-versoepeling: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === COMPONENTS === */
:root {
  --knop-primair-achtergrond: #ff6301;
  --knop-primair-achtergrond-hover: #e05400;
  --knop-primair-tekst: #04180f;
  --knop-tweede-achtergrond: transparent;
  --knop-tweede-tekst: #f2f7f3;
  --knop-tweede-rand: rgba(242, 247, 243, 0.30);
  --knop-uit-achtergrond: #12291d;
  --knop-uit-tekst: #4a5a51;
  --knop-padding-y: 12px;
  --knop-padding-x: 20px;
  --knop-radius: 100px;
  --knop-tekstgrootte: 0.719rem;
  --knop-letterafstand: 0.07em;
  --kaart-achtergrond: #004225;
  --kaart-achtergrond-hover: #00522e;
  --kaart-rand: rgba(242, 247, 243, 0.14);
  --kaart-radius: 12px;
  --kaart-padding: 24px;
  --kaart-tekst: #b0b6b1;
  --kaart-cijfer: #45d9a4;
  --invoer-achtergrond: #0a1a12;
  --invoer-tekst: #f2f7f3;
  --invoer-plaatshouder: #858c87;
  --invoer-rand: rgba(242, 247, 243, 0.14);
  --invoer-rand-focus: #45d9a4;
  --invoer-rand-fout: #ff6b7d;
  --invoer-label: #858c87;
  --invoer-hulptekst: #858c87;
  --invoer-foutmelding: #ff6b7d;
  --invoer-radius: 12px;
  --invoer-padding-y: 12px;
  --invoer-padding-x: 16px;
  --tabel-kop-achtergrond: #004225;
  --tabel-kop-tekst: #858c87;
  --tabel-rij-rand: rgba(242, 247, 243, 0.14);
  --tabel-rij-hover: rgba(242, 247, 243, 0.04);
  --tabel-cel-padding-y: 12px;
  --tabel-cel-padding-x: 16px;
  --tabel-cijfer: tabular-nums;
  --pil-goed-tekst: #45d9a4;
  --pil-waarschuwing-tekst: #ffd166;
  --pil-fout-tekst: #ff6b7d;
  --pil-radius: 100px;
  --pil-padding-y: 4px;
  --pil-padding-x: 8px;
  --pil-tekstgrootte: 0.594rem;
  --link-kleur: #ff6301;
  --link-kleur-vlak: #ff8a3d;
  --link-onderstreep: 1px solid currentColor;
  --melding-achtergrond: #004225;
  --melding-rail-goed: #45d9a4;
  --melding-rail-let-op: #ffd166;
  --melding-rail-fout: #ff6b7d;
  --melding-rail-actie: #ff6301;
  --melding-rail-dikte: 3px;
  --melding-padding: 16px;
  --grafiek-handwerk: #858c87;
  --grafiek-vanzelf: #45d9a4;
  --grafiek-mens: #ff6301;
  --grafiek-reeks-1: #c8f24e;
  --grafiek-reeks-2: #ffb3d9;
  --grafiek-reeks-3: #5ec6ff;
  --grafiek-reeks-4: #b39dff;
  --grafiek-reeks-5: #7a8a84;
  --grafiek-as: rgba(242, 247, 243, 0.14);
  --grafiek-raster: rgba(242, 247, 243, 0.14);
  --grafiek-label: #858c87;
  --grafiek-waarde: #f2f7f3;
  --diagram-raster-lijn: rgba(242, 247, 243, 0.045);
  --diagram-raster-maat: 24px;
  --diagram-knooppunt-achtergrond: #050e09;
  --diagram-knooppunt-rand: rgba(242, 247, 243, 0.30);
  --diagram-knooppunt-tekst: #f2f7f3;
  --diagram-knooppunt-radius: 12px;
  --diagram-knooppunt-padding-y: 12px;
  --diagram-knooppunt-padding-x: 16px;
  --diagram-stroom-kleur: #45d9a4;
  --diagram-stroom-dikte: 2px;
  --diagram-stroom-stil: rgba(242, 247, 243, 0.14);
  --diagram-puls-kleur: #79f2c0;
  --diagram-puls-maat: 8px;
  --diagram-puls-duur: 2.4s;
  --diagram-wacht-duur: 1.2s;
  --diagram-beslis-achtergrond: #ff6301;
  --diagram-beslis-tekst: #04180f;
  --diagram-beslis-gloed: rgba(255, 99, 1, 0.22);
  --diagram-label-kleur: #858c87;
  --diagram-label-grootte: 0.594rem;
  --diagram-label-letterafstand: 0.16em;
  --focus-kleur: #45d9a4;
  --focus-dikte: 2px;
  --focus-afstand: 3px;
}