/* ============================================================
   Brantec — design tokens (richting: Kobalt 🔷)
   Bron: design/DESIGN.md v1.0 · 2026-10-14
   Regel: dit bestand is de ENIGE bron van kleur/type/ruimte/motion.
   Componenten verwijzen naar variabelen — nooit naar ruwe waarden.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ==== KLEUR — donker thema (default) ==== */
  --bg-base: #0B0B0C;
  --bg-panel: #131418;
  --bg-elevated: #1B1D23;
  --text-primary: #F5F7FA;     /* ≥15:1 op bg-base */
  --text-secondary: #B6BDC7;   /* ≥9:1  */
  --text-muted: #8A93A1;       /* ≥5:1 — nooit lichter */
  --accent: #3E7BFF;
  --accent-hover: #6696FF;
  --accent-text: #6696FF;     /* accenttekst op donker ±6:1 */
  --on-accent: #0B0B0C;        /* donkere tekst op accent (50+) */
  --border-hairline: rgba(255, 255, 255, 0.14);  /* decoratief */
  --border-functional: #646B78;                  /* ≥3:1 */
  --focus-ring: #8FB4FF;
  --error-text: #FF8A8A;      /* foutmelding-tekst ≥5:1 op donker */
  --error-border: #E05B5B;    /* invoerrand bij fout ≥3:1 */
  --overlay: rgba(11, 11, 12, 0.55);
  --header-bg: rgba(11, 11, 12, 0.92);

  /* ==== TYPE ==== */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display-xl: clamp(46px, 6vw, 84px);
  --fs-display-l: clamp(36px, 4.5vw, 60px);
  --fs-heading-m: 28px;
  --fs-heading-s: 22px;
  --fs-label: 13px;
  --fs-body-l: 18px;
  --fs-body: 17px;
  --fs-body-s: 15px;
  --fs-button: 16px;
  --fs-stat: 40px;
  --lh-display: 0.98;
  --lh-display-l: 1;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-body-l: 1.65;
  --lh-label: 1.2;
  --tracking-display: -0.02em;
  --tracking-display-l: -0.015em;
  --tracking-label: 0.08em;
  --tracking-button: 0.02em;
  --weight-body: 400;
  --weight-ui: 600;
  --weight-heading: 700;
  --weight-display: 800;

  /* ==== RUIMTE (basis 8px) ==== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section: clamp(72px, 9vw, 128px); /* sectie-ritme — consistent op elke naad */
  --container: 1200px;
  --gutter: 24px;

  /* ==== RADIUS ==== */
  --r-sm: 2px;
  --r-md: 4px;
  --r-full: 999px;

  /* ==== MOTION ==== */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* kleur/hover */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entrance/exit — sterk */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* beweging op het scherm */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* drawer-panelen */

  /* ==== SIGNATUUR ==== */
  --cut-angle: 6deg; /* één diagonale snede per pagina */
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}

/* ==== LICHT THEMA (via de thema-schakelaar; donker is de vaste default) ==== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #F5F6F8;
  --bg-panel: #FFFFFF;
  --bg-elevated: #EDEFF3;
  --text-primary: #0B0B0C;
  --text-secondary: #4A5261;
  --text-muted: #5F6B7A;
  --accent: #2B62DB;
  --accent-hover: #1F4CAC;
  --accent-text: #2B62DB;
  --on-accent: #FFFFFF;
  --border-hairline: rgba(11, 11, 12, 0.10);
  --border-functional: #7E8692;
  --focus-ring: #2B62DB;
  --error-text: #B3261E;
  --error-border: #B3261E;
  --overlay: rgba(11, 11, 12, 0.45);
  --header-bg: rgba(245, 246, 248, 0.92);
}

/* ==== REDUCED MOTION (systeembreed) ==== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 150ms;  /* reveal-fade blijft (gentler); beweging wordt apart uitgezet */
  }
}