/* ==========================================================================
   NotaOne — Design Tokens
   Alle visuele constanten van het systeem. Eén bron van waarheid.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Typografie ---------------------------------------------------- */
  --font-sans: -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI Variable",
    "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", ui-monospace, "JetBrains Mono", Menlo,
    Consolas, monospace;

  --fs-2xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
  --fs-xs:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-sm:  clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --fs-md:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lg:  clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-xl:  clamp(1.625rem, 1.45rem + 0.7vw, 2rem);
  --fs-2xl: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --fs-4xl: clamp(3rem, 2.2rem + 3.2vw, 5rem);
  --fs-5xl: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.04em;
  --tracking-snug: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* ---- Ruimte (8px-schaal met fluïde tussenwaarden) ------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.5rem + 4vw, 7.5rem);
  --space-3xl: clamp(6rem, 4.5rem + 6vw, 10rem);

  --container-max: 1280px;
  --container-narrow: 800px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii & lijnen -------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --border-hairline: 1px;

  /* ---- Beweging -------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-slower: 900ms;

  /* ---- Z-lagen ---------------------------------------------------------- */
  --z-canvas: 0;
  --z-content: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* ---- Merkkleuren (gedeeld door beide thema's) ------------------------ */
  --brand-violet: 262 83% 66%;
  --brand-blue: 221 91% 65%;
  --brand-cyan: 189 94% 55%;
  --brand-emerald: 152 69% 51%;
  --brand-amber: 38 96% 60%;
  --brand-rose: 350 89% 65%;

  --gradient-ai: linear-gradient(120deg,
      hsl(var(--brand-violet)) 0%,
      hsl(var(--brand-blue)) 50%,
      hsl(var(--brand-cyan)) 100%);
  --gradient-ai-soft: linear-gradient(120deg,
      hsl(var(--brand-violet) / 0.16) 0%,
      hsl(var(--brand-blue) / 0.16) 50%,
      hsl(var(--brand-cyan) / 0.16) 100%);

  /* Iets donkerdere variant, gegarandeerd >=4.5:1 contrast met witte knoptekst
     (WCAG AA voor normale tekstgrootte) — gebruikt op knoppen, niet decoratief. */
  --brand-violet-a11y: 262 83% 56%;
  --brand-blue-a11y: 221 91% 56%;
  --gradient-btn: linear-gradient(135deg, hsl(var(--brand-violet-a11y)), hsl(var(--brand-blue-a11y)));
  --gradient-btn-hover: linear-gradient(135deg, hsl(var(--brand-blue-a11y)), hsl(var(--brand-violet-a11y)));
}

/* ---- Donker thema (standaard) ------------------------------------------ */
:root,
[data-theme="dark"] {
  --bg-0: #050507;
  --bg-1: #0a0a0e;
  --bg-2: #101015;
  --bg-3: #16161d;
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.08);
  --surface-glass: rgba(18, 18, 24, 0.55);
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text-0: #f7f7f9;
  --text-1: rgba(247, 247, 249, 0.86);
  --text-2: rgba(247, 247, 249, 0.62);
  --text-3: rgba(247, 247, 249, 0.4);

  --shadow-color: 0deg 0% 0%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / 0.5);
  --shadow-lg: 0 24px 60px -16px hsl(var(--shadow-color) / 0.6);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px -20px hsl(var(--brand-violet) / 0.45);

  --scrim: linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,0.9) 100%);
  color-scheme: dark;
}

/* ---- Licht thema -------------------------------------------------------- */
[data-theme="light"] {
  --bg-0: #fbfbfd;
  --bg-1: #f4f4f7;
  --bg-2: #ececf1;
  --bg-3: #e4e4ea;
  --surface-1: rgba(10, 10, 20, 0.03);
  --surface-2: rgba(10, 10, 20, 0.05);
  --surface-3: rgba(10, 10, 20, 0.08);
  --surface-glass: rgba(255, 255, 255, 0.6);
  --border-1: rgba(10, 10, 20, 0.08);
  --border-2: rgba(10, 10, 20, 0.13);
  --border-strong: rgba(10, 10, 20, 0.2);

  --text-0: #0b0b0f;
  --text-1: rgba(11, 11, 15, 0.82);
  --text-2: rgba(11, 11, 15, 0.58);
  --text-3: rgba(11, 11, 15, 0.38);

  --shadow-color: 230deg 20% 30%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / 0.16);
  --shadow-lg: 0 24px 60px -16px hsl(var(--shadow-color) / 0.22);
  --shadow-glow: 0 0 0 1px rgba(10,10,20,0.05), 0 20px 60px -20px hsl(var(--brand-violet) / 0.25);

  --scrim: linear-gradient(180deg, rgba(251,251,253,0) 0%, rgba(251,251,253,0.92) 100%);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}