/* Fanzestic — design tokens. GEGENEREERD door fanzestic-tokens-build.py uit tokens.json; niet met de hand bewerken. */
/* Lettertypes: Nunito (koppen/logo) en DM Sans (tekst). Laden via Google Fonts of lokaal gevendored — zie 02-typografie.md. */

:root {
  --fz-oranje-50: #FFF4EB;
  --fz-oranje-100: #FFE6D0;
  --fz-oranje-200: #FFC38F;
  --fz-oranje-300: #FF9A45;
  --fz-oranje-400: #FF7F24;
  --fz-oranje-500: #FF6A00;
  --fz-oranje-600: #B25015;
  --fz-oranje-700: #8B3F12;
  --fz-oranje-800: #683010;
  --fz-oranje-900: #4B230D;
  --fz-zeeblauw-50: #F1F7FD;
  --fz-zeeblauw-100: #DEEDFA;
  --fz-zeeblauw-200: #BCDBF5;
  --fz-zeeblauw-300: #A9D2F2;
  --fz-zeeblauw-400: #7AA7D9;
  --fz-zeeblauw-500: #5B8DC9;
  --fz-zeeblauw-600: #3E6FAB;
  --fz-zeeblauw-700: #1A4F8C;
  --fz-zeeblauw-800: #00407A;
  --fz-zeeblauw-900: #002F65;
  --fz-inkt-50: #F6F6F8;
  --fz-inkt-100: #E9EBEE;
  --fz-inkt-200: #D4D7DD;
  --fz-inkt-300: #B9BEC8;
  --fz-inkt-400: #9CA3B1;
  --fz-inkt-500: #80899A;
  --fz-inkt-600: #626E82;
  --fz-inkt-700: #47566D;
  --fz-inkt-800: #2F415A;
  --fz-inkt-900: #102A45;
  --fz-zonnebloem-50: #FFF5DF;
  --fz-zonnebloem-100: #FFE7B4;
  --fz-zonnebloem-200: #FFD067;
  --fz-zonnebloem-300: #FFC53D;
  --fz-zonnebloem-400: #F5AF00;
  --fz-zonnebloem-500: #E59900;
  --fz-zonnebloem-600: #A25C00;
  --fz-zonnebloem-700: #814600;
  --fz-zonnebloem-800: #643400;
  --fz-zonnebloem-900: #492500;
  --fz-perzik-50: #FFF4EE;
  --fz-perzik-100: #FFE5D7;
  --fz-perzik-200: #FFD0C2;
  --fz-perzik-300: #FFB09A;
  --fz-perzik-400: #FF9C7F;
  --fz-perzik-500: #F27F76;
  --fz-perzik-600: #B84653;
  --fz-perzik-700: #943341;
  --fz-perzik-800: #712532;
  --fz-perzik-900: #531B25;
  --fz-mint-50: #EDF9F5;
  --fz-mint-100: #D6F1E7;
  --fz-mint-200: #ACE3CF;
  --fz-mint-300: #8FD9C0;
  --fz-mint-400: #6BB099;
  --fz-mint-500: #529580;
  --fz-mint-600: #387865;
  --fz-mint-700: #1D5F4D;
  --fz-mint-800: #004938;
  --fz-mint-900: #003727;
  --fz-groen-50: #F1F9EB;
  --fz-groen-100: #DDF1D1;
  --fz-groen-200: #C4F2C6;
  --fz-groen-300: #97E89E;
  --fz-groen-400: #2FD55D;
  --fz-groen-500: #23B84D;
  --fz-groen-600: #147E32;
  --fz-groen-700: #116226;
  --fz-groen-800: #114A1D;
  --fz-groen-900: #0D3615;
  --fz-fuchsia-50: #FFF3F7;
  --fz-fuchsia-100: #FFE4EC;
  --fz-fuchsia-200: #FFC9D9;
  --fz-fuchsia-300: #FDA5C2;
  --fz-fuchsia-400: #F77BA8;
  --fz-fuchsia-500: #E6007E;
  --fz-fuchsia-600: #C53173;
  --fz-fuchsia-700: #992859;
  --fz-fuchsia-800: #722243;
  --fz-fuchsia-900: #511B30;
  --fz-paars-50: #FAF4FF;
  --fz-paars-100: #F3E6FF;
  --fz-paars-200: #E6CEFF;
  --fz-paars-300: #D4AEFE;
  --fz-paars-400: #BE8BFD;
  --fz-paars-500: #7B2FF7;
  --fz-paars-600: #653C9F;
  --fz-paars-700: #523080;
  --fz-paars-800: #3F2563;
  --fz-paars-900: #2F1C49;
  --fz-creme: #F7F3EE;
  --fz-nacht: #102A45;
  --fz-merk: #FF6A00;
  --fz-bg: #F7F3EE;
  --fz-surface: #FFFFFF;
  --fz-surface-2: #F1ECE5;
  --fz-surface-active: #F1F7FD;
  --fz-line: rgba(16,42,69,0.10);
  --fz-line-strong: rgba(16,42,69,0.22);
  --fz-control: rgba(16,42,69,0.58);
  --fz-ink: #102A45;
  --fz-ink-2: #47566D;
  --fz-ink-3: #80899A;
  --fz-accent: #1A4F8C;
  --fz-accent-text: #1A4F8C;
  --fz-accent-soft: rgba(26,79,140,0.08);
  --fz-action: #1A4F8C;
  --fz-action-hover: #00407A;
  --fz-on-action: #FFFFFF;
  --fz-zest: #FF6A00;
  --fz-zest-text: #B25015;
  --fz-zest-soft: #FFF4EB;
  --fz-focus: #3E6FAB;
  --fz-danger: #B42318;
  --fz-danger-soft: #FDECEA;
  --fz-warning: #814600;
  --fz-warning-soft: #FFF5DF;
  --fz-success: #116226;
  --fz-success-soft: #F1F9EB;
  --fz-info: #1A4F8C;
  --fz-info-soft: #F1F7FD;
  --fz-shadow-sm: 0 1px 3px rgba(16,42,69,0.07), 0 1px 2px rgba(16,42,69,0.05);
  --fz-shadow-md: 0 4px 16px rgba(16,42,69,0.09), 0 1px 4px rgba(16,42,69,0.06);
  --fz-shadow-lg: 0 8px 30px rgba(16,42,69,0.12), 0 2px 8px rgba(16,42,69,0.06);
  --fz-font-display: "Nunito", "DM Sans", system-ui, sans-serif;
  --fz-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fz-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fz-text-display-xl: 900 60px/64px var(--fz-font-display);
  --fz-tracking-display-xl: -0.025em;
  --fz-text-display: 900 48px/52px var(--fz-font-display);
  --fz-tracking-display: -0.025em;
  --fz-text-h1: 800 38px/44px var(--fz-font-display);
  --fz-tracking-h1: -0.02em;
  --fz-text-h2: 800 30px/36px var(--fz-font-display);
  --fz-tracking-h2: -0.015em;
  --fz-text-h3: 800 24px/30px var(--fz-font-display);
  --fz-tracking-h3: -0.01em;
  --fz-text-h4: 700 20px/26px var(--fz-font-display);
  --fz-tracking-h4: -0.005em;
  --fz-text-lead: 400 18px/28px var(--fz-font-body);
  --fz-text-body: 400 16px/24px var(--fz-font-body);
  --fz-text-body-sm: 400 14px/20px var(--fz-font-body);
  --fz-text-ui: 500 13px/18px var(--fz-font-body);
  --fz-text-caption: 500 12.5px/16px var(--fz-font-body);
  --fz-text-label: 600 11.5px/14px var(--fz-font-body);
  --fz-tracking-label: 0.08em;
  --fz-space-0-5: 2px;
  --fz-space-1: 4px;
  --fz-space-1-5: 6px;
  --fz-space-2: 8px;
  --fz-space-3: 12px;
  --fz-space-4: 16px;
  --fz-space-5: 20px;
  --fz-space-6: 24px;
  --fz-space-8: 32px;
  --fz-space-10: 40px;
  --fz-space-12: 48px;
  --fz-space-16: 64px;
  --fz-space-20: 80px;
  --fz-radius-sm: 6px;
  --fz-radius-md: 10px;
  --fz-radius-lg: 14px;
  --fz-radius-xl: 18px;
  --fz-radius-pill: 999px;
  --fz-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fz-dur-fast: 150ms;
  --fz-dur-mid: 220ms;
  --fz-dur-slow: 360ms;
  color-scheme: light;
}

/* Donker: volgt het systeem, tenzij data-theme="light" is gezet */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fz-bg: #102A45;
    --fz-surface: #17355A;
    --fz-surface-2: #1D3D66;
    --fz-surface-active: #23497A;
    --fz-line: rgba(247,243,238,0.10);
    --fz-line-strong: rgba(247,243,238,0.22);
    --fz-control: rgba(247,243,238,0.46);
    --fz-ink: #F2EDE6;
    --fz-ink-2: #BFCAD7;
    --fz-ink-3: #8A9AB0;
    --fz-accent: #A9D2F2;
    --fz-accent-text: #F2EDE6;
    --fz-accent-soft: rgba(169,210,242,0.12);
    --fz-action: #F2EDE6;
    --fz-action-hover: #FFE6D0;
    --fz-on-action: #102A45;
    --fz-zest: #FF6A00;
    --fz-zest-text: #FF9A45;
    --fz-zest-soft: rgba(255,154,69,0.14);
    --fz-focus: #FF9A45;
    --fz-danger: #F59A8F;
    --fz-danger-soft: rgba(245,154,143,0.14);
    --fz-warning: #FFD067;
    --fz-warning-soft: rgba(255,208,103,0.14);
    --fz-success: #97E89E;
    --fz-success-soft: rgba(161,216,132,0.12);
    --fz-info: #A9D2F2;
    --fz-info-soft: rgba(169,210,242,0.12);
    --fz-shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --fz-shadow-md: 0 4px 16px rgba(0,0,0,0.40);
    --fz-shadow-lg: 0 8px 30px rgba(0,0,0,0.50);
    color-scheme: dark;
  }
}

/* Donker: expliciet gekozen, op de pagina of op een los blok */
:root[data-theme="dark"], [data-theme="dark"] {
  --fz-bg: #102A45;
  --fz-surface: #17355A;
  --fz-surface-2: #1D3D66;
  --fz-surface-active: #23497A;
  --fz-line: rgba(247,243,238,0.10);
  --fz-line-strong: rgba(247,243,238,0.22);
  --fz-control: rgba(247,243,238,0.46);
  --fz-ink: #F2EDE6;
  --fz-ink-2: #BFCAD7;
  --fz-ink-3: #8A9AB0;
  --fz-accent: #A9D2F2;
  --fz-accent-text: #F2EDE6;
  --fz-accent-soft: rgba(169,210,242,0.12);
  --fz-action: #F2EDE6;
  --fz-action-hover: #FFE6D0;
  --fz-on-action: #102A45;
  --fz-zest: #FF6A00;
  --fz-zest-text: #FF9A45;
  --fz-zest-soft: rgba(255,154,69,0.14);
  --fz-focus: #FF9A45;
  --fz-danger: #F59A8F;
  --fz-danger-soft: rgba(245,154,143,0.14);
  --fz-warning: #FFD067;
  --fz-warning-soft: rgba(255,208,103,0.14);
  --fz-success: #97E89E;
  --fz-success-soft: rgba(161,216,132,0.12);
  --fz-info: #A9D2F2;
  --fz-info-soft: rgba(169,210,242,0.12);
  --fz-shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --fz-shadow-md: 0 4px 16px rgba(0,0,0,0.40);
  --fz-shadow-lg: 0 8px 30px rgba(0,0,0,0.50);
  color-scheme: dark;
}

/* Licht: expliciet op een los blok binnen een donkere pagina */
[data-theme="light"] {
  --fz-bg: #F7F3EE;
  --fz-surface: #FFFFFF;
  --fz-surface-2: #F1ECE5;
  --fz-surface-active: #F1F7FD;
  --fz-line: rgba(16,42,69,0.10);
  --fz-line-strong: rgba(16,42,69,0.22);
  --fz-control: rgba(16,42,69,0.58);
  --fz-ink: #102A45;
  --fz-ink-2: #47566D;
  --fz-ink-3: #80899A;
  --fz-accent: #1A4F8C;
  --fz-accent-text: #1A4F8C;
  --fz-accent-soft: rgba(26,79,140,0.08);
  --fz-action: #1A4F8C;
  --fz-action-hover: #00407A;
  --fz-on-action: #FFFFFF;
  --fz-zest: #FF6A00;
  --fz-zest-text: #B25015;
  --fz-zest-soft: #FFF4EB;
  --fz-focus: #3E6FAB;
  --fz-danger: #B42318;
  --fz-danger-soft: #FDECEA;
  --fz-warning: #814600;
  --fz-warning-soft: #FFF5DF;
  --fz-success: #116226;
  --fz-success-soft: #F1F9EB;
  --fz-info: #1A4F8C;
  --fz-info-soft: #F1F7FD;
  --fz-shadow-sm: 0 1px 3px rgba(16,42,69,0.07), 0 1px 2px rgba(16,42,69,0.05);
  --fz-shadow-md: 0 4px 16px rgba(16,42,69,0.09), 0 1px 4px rgba(16,42,69,0.06);
  --fz-shadow-lg: 0 8px 30px rgba(16,42,69,0.12), 0 2px 8px rgba(16,42,69,0.06);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fz-dur-fast: 0ms; --fz-dur-mid: 0ms; --fz-dur-slow: 0ms; }
}