/* ============================================================
   EasyAutoVerkoop — 01-tokens.css — design tokens
   Versie 1.3.0 · 2026-09-14
   Bron van waarheid voor kleur, type, spacing, layout, motion.
   Geen selectors buiten :root en de motion-safety-net.
   Kleuren hangen aan GP Global Colors (Customizer → Colors);
   wijzig de hexwaarde dáár, niet hier.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* === Palette (raw) — koppeling aan GP Global Colors, fallback = huidige waarde === */
  --eav-raw-primary: var(--yale-blue, #06386b);
  --eav-raw-accent:  var(--global-color-5, #5cdb94);
  --eav-raw-ink:     var(--main-text, #052a51);
  --eav-raw-paper:   var(--base-3, #ffffff);
  --eav-raw-sand:    var(--sub-background, #f2efea);
  --eav-raw-celadon: var(--celadon, #cdead5);

  /* Afgeleide raw-tinten voor donkere modus — berekend, geen tweede hexset */
  --eav-raw-night:       color-mix(in oklch, var(--eav-raw-ink) 62%, black);
  --eav-raw-night-alt:   color-mix(in oklch, var(--eav-raw-ink) 78%, black);
  --eav-raw-primary-lit: color-mix(in oklch, var(--eav-raw-primary) 45%, white);

  /* === Kleuren (semantisch) — componenten gebruiken alleen deze === */
  --eav-clr-primary:        light-dark(var(--eav-raw-primary), var(--eav-raw-primary-lit));
  --eav-clr-primary-hover:  light-dark(
                              color-mix(in oklch, var(--eav-raw-primary) 88%, black),
                              color-mix(in oklch, var(--eav-raw-primary-lit) 88%, white)
                            );
  --eav-clr-text-on-primary: light-dark(var(--eav-raw-paper), var(--eav-raw-ink));

  --eav-clr-accent:         var(--eav-raw-accent);
  --eav-clr-accent-hover:   color-mix(in oklch, var(--eav-raw-accent) 88%, black);
  --eav-clr-text-on-accent: var(--eav-raw-ink);   /* groen + wit = 1.9:1 → nooit witte tekst op accent */

  --eav-clr-secondary:      light-dark(var(--eav-raw-ink), var(--eav-raw-paper));

  --eav-clr-text:           light-dark(var(--eav-raw-ink), color-mix(in oklch, var(--eav-raw-paper) 94%, var(--eav-raw-ink)));
  --eav-clr-text-muted:     light-dark(
                              color-mix(in oklch, var(--eav-raw-ink) 72%, var(--eav-raw-paper)),
                              color-mix(in oklch, var(--eav-raw-paper) 72%, var(--eav-raw-night))
                            );
  --eav-clr-text-on-dark:   var(--eav-raw-paper);

  --eav-clr-bg:             light-dark(var(--eav-raw-paper), var(--eav-raw-night));
  --eav-clr-bg-alt:         light-dark(var(--eav-raw-sand), var(--eav-raw-night-alt));
  --eav-clr-surface:        light-dark(
                              color-mix(in oklch, var(--eav-raw-paper) 92%, var(--eav-raw-primary)),
                              color-mix(in oklch, var(--eav-raw-night) 88%, white)
                            );
  --eav-clr-surface-accent: light-dark(var(--eav-raw-celadon), color-mix(in oklch, var(--eav-raw-night) 75%, var(--eav-raw-accent)));
  --eav-clr-border:         light-dark(
                              color-mix(in oklch, var(--eav-raw-ink) 14%, var(--eav-raw-paper)),
                              color-mix(in oklch, var(--eav-raw-paper) 18%, var(--eav-raw-night))
                            );
  /* border-strong: ≥3:1 tegen bg én bg-alt — verplicht op formulier-velden (WCAG 1.4.11) */
  --eav-clr-border-strong:  light-dark(
                              color-mix(in oklch, var(--eav-raw-ink) 55%, var(--eav-raw-paper)),
                              color-mix(in oklch, var(--eav-raw-paper) 50%, var(--eav-raw-night))
                            );
  --eav-clr-focus:          light-dark(var(--eav-raw-primary), var(--eav-raw-accent));
  --eav-clr-selection:      color-mix(in oklch, var(--eav-raw-accent) 35%, transparent);

  /* === Gradients — de "moderne" laag; altijd via tokens, nooit inline === */
  --eav-grad-brand:   linear-gradient(135deg, var(--eav-raw-primary) 0%, var(--eav-raw-ink) 100%);
  --eav-grad-hero:    linear-gradient(115deg,
                        color-mix(in oklch, var(--eav-raw-ink) 92%, transparent) 0%,
                        color-mix(in oklch, var(--eav-raw-primary) 55%, transparent) 55%,
                        color-mix(in oklch, var(--eav-raw-ink) 20%, transparent) 100%);
  --eav-grad-accent:  linear-gradient(120deg, var(--eav-raw-accent) 0%, color-mix(in oklch, var(--eav-raw-accent) 70%, var(--eav-raw-primary)) 100%);
  --eav-grad-soft:    linear-gradient(160deg, var(--eav-clr-bg-alt) 0%, var(--eav-clr-surface-accent) 100%);
  --eav-grad-glass:   linear-gradient(20deg,
                        color-mix(in oklch, var(--eav-raw-paper) 85%, transparent) 0%,
                        color-mix(in oklch, var(--eav-raw-paper) 65%, transparent) 100%);
  --eav-grad-glow:    radial-gradient(60% 60% at 70% 30%, color-mix(in oklch, var(--eav-raw-accent) 28%, transparent) 0%, transparent 70%);

  /* === Kentekenplaat — geen merkkleur, wel de enige plek met deze hexwaarden === */
  /* TODO: bevestigen — NL-plaatstijl (RAL 1023 geel) of neutraal veld */
  --eav-plate-yellow: #f7d117;
  --eav-plate-blue:   #003399;

  /* === Shadows — kleur afgeleid van ink, niet zwart === */
  --eav-shadow-sm: 0 1px 2px color-mix(in oklch, var(--eav-raw-ink) 10%, transparent);
  --eav-shadow-md: 0 6px 20px -4px color-mix(in oklch, var(--eav-raw-ink) 18%, transparent);
  --eav-shadow-lg: 0 20px 50px -12px color-mix(in oklch, var(--eav-raw-ink) 32%, transparent);

  /* === Fluid type scale (320 → 1240, ratio 1.25) === */
  --eav-fs-300: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);      /* small */
  --eav-fs-400: clamp(1rem, 0.93rem + 0.36vw, 1.125rem);      /* body */
  --eav-fs-500: clamp(1.125rem, 1rem + 0.62vw, 1.4rem);       /* lead */
  --eav-fs-600: clamp(1.4rem, 1.16rem + 1.18vw, 2rem);        /* h3 */
  --eav-fs-700: clamp(1.75rem, 1.32rem + 2.18vw, 2.85rem);    /* h2 */
  --eav-fs-800: clamp(2.2rem, 1.5rem + 3.5vw, 4rem);          /* h1 */
  --eav-fs-900: clamp(2.6rem, 1.6rem + 5vw, 5.5rem);          /* hero display */

  /* === Line-height === */
  --eav-lh-tight: 1.1;
  --eav-lh-snug:  1.3;
  --eav-lh-base:  1.6;

  /* === Fluid spacing (Utopia-style) === */
  --eav-space-3xs: clamp(0.25rem, 0.22rem + 0.13vw, 0.31rem);
  --eav-space-2xs: clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem);
  --eav-space-xs:  clamp(0.75rem, 0.68rem + 0.36vw, 0.94rem);
  --eav-space-s:   clamp(1rem, 0.91rem + 0.45vw, 1.25rem);
  --eav-space-m:   clamp(1.5rem, 1.36rem + 0.71vw, 1.88rem);
  --eav-space-l:   clamp(2rem, 1.82rem + 0.89vw, 2.5rem);
  --eav-space-xl:  clamp(3rem, 2.73rem + 1.34vw, 3.75rem);
  --eav-space-2xl: clamp(4rem, 3.64rem + 1.79vw, 5rem);
  --eav-space-3xl: clamp(6rem, 5.46rem + 2.68vw, 7.5rem);

  /* === Layout ===
     --eav-container hangt aan GenerateBlocks' globale waarde (GP Customizer →
     Layout → Container → Container Width). Wijzig die instelling in de
     Customizer, niet hier. Wide = impactvolle banden tot 2000px; content
     blijft in --eav-container / --eav-container-narrow gecentreerd. */
  /* TODO: bevestigen — Customizer Container Width staat op de default 1200px */
  --eav-container:        var(--gb-container-width, 1200px);
  --eav-container-narrow: 760px;
  --eav-container-wide:   2000px;
  --eav-gutter:           clamp(1rem, 4vw, 2.5rem);
  --eav-bp-nav:           1000px;   /* = data-gb-mobile-breakpoint op de GB Pro Navigation (4ab95a25) */
  --eav-header-h:         6.75rem;  /* topbar 2.25rem + hoofdrij 4.5rem; voor scroll-padding */

  /* === Borders === */
  --eav-border-width: 1px;
  --eav-radius-sm:    0.25rem;
  --eav-radius-md:    0.5rem;
  --eav-radius-lg:    1rem;
  --eav-radius-xl:    1.75rem;
  --eav-radius-pill:  9999px;

  /* === Typografie families === */
  --eav-ff-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --eav-ff-body:    system-ui, -apple-system, "Segoe UI", sans-serif;

  /* === Motion (opt-in, zie 03-base.css) === */
  --eav-ease:            cubic-bezier(0.2, 0, 0, 1);
  --eav-duration-fast:   150ms;
  --eav-duration-base:   250ms;
  --eav-duration-slow:   450ms;
  --eav-transition-fast: var(--eav-duration-fast) var(--eav-ease);
  --eav-transition-base: var(--eav-duration-base) var(--eav-ease);

  /* === Legacy-aliassen (theme.css) ===
     Oude markup op andere pagina's gebruikt deze namen. Ze wijzen door naar
     de nieuwe tokens; nergens anders definiëren, nergens in nieuwe CSS gebruiken. */
  --eav-space-sm:         var(--eav-space-s);
  --eav-space-md:         var(--eav-space-m);
  --eav-color-bg:         var(--eav-clr-bg);
  --eav-color-bg-alt:     var(--eav-clr-bg-alt);
  --eav-color-border:     var(--eav-clr-border);
  --eav-color-text:       var(--eav-clr-text);
  --eav-color-text-muted: var(--eav-clr-text-muted);
  --eav-color-primary:    var(--eav-clr-primary);
  --eav-radius:           var(--eav-radius-md);

  /* === Z-index === */
  --eav-z-header:  100;
  --eav-z-overlay: 200;
  --eav-z-modal:   300;
  --eav-z-tooltip: 400;
}

/* Handmatige override — alleen nodig als er later een toggle komt.
   [data-theme="light"] / [data-theme="dark"] op <html> forceert de kant. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Motion safety-net. Eigen motion is opt-in via
   @media (prefers-reduced-motion: no-preference) in 03-base.css; dit blok
   vangt third-party animaties. 0.01ms i.p.v. none zodat JS-events
   (animationend/transitionend) blijven vuren. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}