/* Dutch Horizon design tokens v2 "Veen & klei". Bron: docs/DESIGN.md §4.8. Letterlijk overnemen in public/assets/css/tokens.css */
:root {
  /* ---------- Veen (donker anker: diep veenbruin voor hero, footer, donkere secties) ---------- */
  --dh-veen-950: #1A120D;
  --dh-veen-900: #221812;
  --dh-veen-850: #2A1F17;
  --dh-veen-800: #33261C;
  --dh-veen-700: #463629;
  --dh-veen-600: #5E4A39;
  --dh-turf-900: #2B1911;

  /* ---------- Zand (lichte basis: zand, creme, linnen) ---------- */
  --dh-zand-0: #FDFAF4;
  --dh-zand-50: #F7F1E6;
  --dh-zand-100: #EEE5D4;
  --dh-zand-200: #E0D3BA;
  --dh-zand-300: #CBB898;

  /* ---------- Inkt (veenbruine tekst op licht) / mist (creme tekst op donker) ---------- */
  --dh-ink-900: #211812;
  --dh-ink-700: #4A3B30;
  --dh-ink-600: #5D4D40;
  --dh-ink-500: #6C5B4D;
  --dh-mist-50: #F6EFE3;
  --dh-mist-300: #CDBEA9;
  --dh-mist-400: #A8957F;

  /* ---------- Gloed: klei-terracotta naar zachte zonsopkomst (actie-accent: CTA, actieve keuze, voortgang) ---------- */
  --dh-gloed-800: #7A3A22;
  --dh-gloed-700: #94462B;
  --dh-gloed-600: #AD5734;
  --dh-gloed-500: #CF7F4C;
  --dh-gloed-400: #E0A06A;
  --dh-goud-300: #EAC17F;
  --dh-goud-200: #F2D9AE;
  --dh-goud-100: #F7E8D2;

  /* ---------- Dauw: slootwater (meetdata en informatie, nooit op knoppen) ---------- */
  --dh-dauw-900: #1F3A39;
  --dh-dauw-800: #284A48;
  --dh-dauw-700: #335E5B;
  --dh-dauw-500: #5B8984;
  --dh-dauw-300: #A1C3BC;
  --dh-dauw-100: #DEE8E1;
  --dh-dauw-50: #EEF3EC;

  /* ---------- Mos (logogroen: links, focus, veenvrij, succes) en rood (fout) ---------- */
  --dh-mos-800: #0B4612;
  --dh-mos-700: #06590D;
  --dh-mos-600: #3D7A3A;
  --dh-mos-400: #9FD49B;
  --dh-mos-100: #E3EDD8;
  --dh-rood-700: #A1301C;
  --dh-rood-300: #F2917A;
  --dh-rood-100: #F8E1DA;

  /* ---------- Semantisch (licht = standaard) ---------- */
  --dh-bg: var(--dh-zand-50);
  --dh-surface: var(--dh-zand-0);
  --dh-surface-sunken: var(--dh-zand-100);
  --dh-surface-shell: var(--dh-zand-100);
  --dh-surface-inverse: var(--dh-veen-900);
  --dh-text: var(--dh-ink-900);
  --dh-text-2: var(--dh-ink-700);
  --dh-text-muted: var(--dh-ink-600);
  --dh-text-subtle: var(--dh-ink-500);
  --dh-text-inverse: var(--dh-mist-50);
  --dh-line: rgb(33 24 18 / 0.10);
  --dh-line-strong: rgb(33 24 18 / 0.18);
  --dh-line-field: #8A7765;
  --dh-accent-text: var(--dh-mos-700);
  --dh-accent-icon: var(--dh-mos-600);
  --dh-accent-wash: var(--dh-goud-100);
  --dh-info-text: var(--dh-dauw-700);
  --dh-info-wash: var(--dh-dauw-50);
  --dh-data: var(--dh-dauw-500);
  --dh-success-text: var(--dh-mos-700);
  --dh-success-wash: var(--dh-mos-100);
  --dh-danger-text: var(--dh-rood-700);
  --dh-danger-wash: var(--dh-rood-100);
  --dh-focus: #06590D;
  --dh-backdrop: rgb(26 18 13 / 0.56);

  /* ---------- Gradients & gloed (zachte zonsopkomst: altijd vanuit de horizon of een hoek) ---------- */
  --dh-grad-gloed: linear-gradient(100deg, #CF7F4C 0%, #DE9F68 48%, #E9BF86 100%);
  --dh-grad-gloed-hover: linear-gradient(100deg, #D68A57 0%, #E3A973 48%, #EDC993 100%);
  --dh-grad-sun: linear-gradient(0deg, #CF7F4C 0%, #DE9F68 55%, #E9BF86 100%);
  --dh-grad-seam: linear-gradient(90deg, rgb(234 193 127 / 0) 0%, #EAC17F 22%, #E0A06A 50%, #EAC17F 78%, rgb(234 193 127 / 0) 100%);
  --dh-glow-sunrise: radial-gradient(60% 55% at 50% 100%, rgb(234 193 127 / 0.30) 0%, rgb(207 127 76 / 0.13) 40%, rgb(207 127 76 / 0) 72%);
  --dh-glow-sunrise-light: radial-gradient(55% 60% at 50% 100%, rgb(234 193 127 / 0.26) 0%, rgb(207 127 76 / 0.07) 45%, rgb(207 127 76 / 0) 75%);
  --dh-glow-corner: radial-gradient(40% 60% at 100% 0%, rgb(234 193 127 / 0.12) 0%, rgb(234 193 127 / 0) 70%);
  --dh-glow-dauw: radial-gradient(50% 60% at 0% 0%, rgb(161 195 188 / 0.12) 0%, rgb(161 195 188 / 0) 70%);
  --dh-grad-veen: linear-gradient(180deg, var(--dh-veen-950) 0%, var(--dh-veen-900) 55%, var(--dh-turf-900) 100%);

  /* ---------- Radii (vormregel: interactief = pil, velden = sm, containers = lg/xl) ---------- */
  --dh-r-xs: 6px;
  --dh-r-sm: 10px;
  --dh-r-md: 14px;
  --dh-r-lg: 20px;
  --dh-r-xl: 28px;
  --dh-r-xl-inner: 22px;
  --dh-r-pill: 999px;
  --dh-bezel: 6px;

  /* ---------- Schaduwen (getint naar veenbruin, nooit puur zwart) ---------- */
  --dh-shadow-1: 0 1px 2px rgb(34 24 18 / 0.06), 0 1px 1px rgb(34 24 18 / 0.04);
  --dh-shadow-2: 0 2px 6px -1px rgb(34 24 18 / 0.06), 0 12px 28px -10px rgb(34 24 18 / 0.16);
  --dh-shadow-3: 0 6px 12px -4px rgb(34 24 18 / 0.08), 0 32px 64px -24px rgb(34 24 18 / 0.28);
  --dh-shadow-glow: 0 0 0 1px rgb(233 191 134 / 0.36), 0 10px 28px -10px rgb(207 127 76 / 0.45), 0 2px 6px -2px rgb(207 127 76 / 0.30);
  --dh-shadow-glow-hover: 0 0 0 1px rgb(233 191 134 / 0.50), 0 14px 36px -10px rgb(207 127 76 / 0.55), 0 2px 8px -2px rgb(207 127 76 / 0.36);
  --dh-ring-shell: 0 0 0 1px rgb(34 24 18 / 0.07);
  --dh-inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.65);
  --dh-inset-hi-dark: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --dh-focus-ring: 0 0 0 2px var(--dh-bg), 0 0 0 4px var(--dh-focus);

  /* ---------- Spacing (4px-basis) ---------- */
  --dh-space-0-5: 0.125rem;
  --dh-space-1: 0.25rem;
  --dh-space-2: 0.5rem;
  --dh-space-3: 0.75rem;
  --dh-space-4: 1rem;
  --dh-space-5: 1.5rem;
  --dh-space-6: 2rem;
  --dh-space-7: 3rem;
  --dh-space-8: 4rem;
  --dh-space-9: 6rem;
  --dh-space-10: 8rem;
  --dh-section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --dh-section-y-tight: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --dh-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --dh-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --dh-container: 1320px;
  --dh-container-narrow: 880px;
  --dh-measure: 68ch;
  --dh-header-h: 76px;

  /* ---------- Typografie ---------- */
  --dh-font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dh-font-text: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dh-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --dh-stretch-display: 118%;
  --dh-stretch-label: 106%;
  --dh-fw-regular: 400;
  --dh-fw-medium: 500;
  --dh-fw-semibold: 600;
  --dh-fw-bold: 700;
  --dh-fw-display: 720;
  --dh-fs-2xs: 0.75rem;
  --dh-fs-xs: 0.8125rem;
  --dh-fs-sm: 0.875rem;
  --dh-fs-base: 1rem;
  --dh-fs-md: 1.125rem;
  --dh-fs-lg: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
  --dh-fs-xl: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
  --dh-fs-2xl: clamp(1.875rem, 1.55rem + 1.35vw, 2.75rem);
  --dh-fs-3xl: clamp(2.25rem, 1.75rem + 2.1vw, 3.5rem);
  --dh-fs-hero: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --dh-lh-display: 1.04;
  --dh-lh-heading: 1.15;
  --dh-lh-snug: 1.3;
  --dh-lh-body: 1.55;
  --dh-lh-relaxed: 1.7;
  --dh-track-display: -0.02em;
  --dh-track-heading: -0.01em;
  --dh-track-caps: 0.08em;

  /* ---------- Z-index-schaal ---------- */
  --dh-z-raised: 1;
  --dh-z-sticky: 100;
  --dh-z-header: 200;
  --dh-z-dropdown: 300;
  --dh-z-backdrop: 390;
  --dh-z-drawer: 400;
  --dh-z-cookie: 450;
  --dh-z-modal: 500;
  --dh-z-toast: 600;
  --dh-z-skiplink: 1000;

  /* ---------- Motion ---------- */
  --dh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dh-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dh-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dh-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dh-ease-exit: cubic-bezier(0.55, 0, 0.75, 0.3);
  --dh-dur-instant: 90ms;
  --dh-dur-fast: 160ms;
  --dh-dur-base: 240ms;
  --dh-dur-slow: 420ms;
  --dh-dur-reveal: 720ms;
  --dh-stagger: 40ms;
  --dh-reveal-shift: 16px;
  --dh-press-scale: 0.98;

  color-scheme: light;
}

/* Donkere secties (hero, configurator-band, CTA-band, footer, mobiel menu): remap van de semantische laag */
.dh-dark {
  --dh-bg: var(--dh-veen-950);
  --dh-surface: var(--dh-veen-900);
  --dh-surface-sunken: var(--dh-veen-950);
  --dh-surface-shell: rgb(246 239 227 / 0.04);
  --dh-text: var(--dh-mist-50);
  --dh-text-2: var(--dh-mist-300);
  --dh-text-muted: var(--dh-mist-300);
  --dh-text-subtle: var(--dh-mist-400);
  --dh-line: rgb(246 239 227 / 0.10);
  --dh-line-strong: rgb(246 239 227 / 0.18);
  --dh-line-field: #7E6A57;
  --dh-accent-text: var(--dh-goud-300);
  --dh-accent-icon: var(--dh-goud-300);
  --dh-accent-wash: rgb(234 193 127 / 0.12);
  --dh-info-text: var(--dh-dauw-300);
  --dh-info-wash: rgb(161 195 188 / 0.10);
  --dh-data: var(--dh-dauw-300);
  --dh-success-text: var(--dh-mos-400);
  --dh-danger-text: var(--dh-rood-300);
  --dh-focus: var(--dh-goud-300);
  --dh-ring-shell: 0 0 0 1px rgb(246 239 227 / 0.08);
  /* var()-waarden worden opgelost waar ze gedeclareerd zijn: afgeleide tokens hier opnieuw zetten */
  --dh-focus-ring: 0 0 0 2px var(--dh-bg), 0 0 0 4px var(--dh-focus);
  color-scheme: dark;
  background-color: var(--dh-bg);
  color: var(--dh-text);
}

@media (max-width: 767.98px) {
  :root { --dh-header-h: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dh-dur-instant: 1ms;
    --dh-dur-fast: 1ms;
    --dh-dur-base: 1ms;
    --dh-dur-slow: 1ms;
    --dh-dur-reveal: 1ms;
    --dh-stagger: 0ms;
    --dh-reveal-shift: 0px;
    --dh-press-scale: 1;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}