/* ============================================================
   Ai-Revolution · Design tokens (v2: premium / Apple)
   Apple system font first, Inter as the embedded fallback.
   Bolder palette, gradient accents, deeper liquid glass.
   ============================================================ */

/* Fonts load as external woff2 files via fonts.css (assets/fonts/). */

:root {
  /* Type families: real SF Pro on Apple devices, Inter elsewhere */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    system-ui, "Segoe UI", sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui,
    "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Fluid type scale */
  --fs-eyebrow: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --fs-small: clamp(0.85rem, 0.82rem + 0.18vw, 0.95rem);
  --fs-body: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
  --fs-lead: clamp(1.2rem, 1.02rem + 0.8vw, 1.7rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 3.2vw, 4.3rem);
  --fs-display: clamp(2.8rem, 1.4rem + 6.4vw, 7.2rem);
  --fs-mega: clamp(3.2rem, 1.1rem + 9.4vw, 9.5rem);

  /* Apple-tight rhythm */
  --lh-tight: 1.02;
  --lh-snug: 1.06;
  --lh-body: 1.6;
  --tracking-caps: 0.2em;
  --tracking-tight: -0.035em;
  --measure: 40ch;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;
  --section-pad: clamp(5rem, 4rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 5rem);
  --maxw: 1280px;
  --maxw-text: 760px;

  /* Radii */
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-1: 0.28s;
  --dur-2: 0.6s;
  --dur-3: 1s;

  /* Z layers */
  --z-spine: 20;
  --z-nav: 100;
  --z-overlay: 200;

  /* Brand accent (shared) */
  --accent: #aef5fd;
  --accent-2: #66c6ff;
  --accent-3: #4f93ff;
  --grad-accent: linear-gradient(118deg, #c6faff 0%, #aef5fd 26%, #6fc8f5 62%, #4f93ff 100%);
  --grad-accent-soft: linear-gradient(118deg, #aef5fd, #66c6ff);
  /* dé tekst-gradient op donkere vlakken, identiek aan --grad-text in dark;
     voor secties/kaarten die in beide thema's donker blijven (.on-dark e.d.) */
  --grad-text-dark: linear-gradient(118deg, #c6faff 0%, #8fe2fb 45%, #6fb0ff 100%);

  /* ---------- LIGHT THEME ---------- */
  --bg: #eaeef4;
  --bg-2: #f3f6fa;
  --bg-3: #ffffff;
  --bg-contrast: #0a0e16;
  --ink: #0a0e14;
  --ink-soft: #4f5a67;
  --ink-faint: #8a95a2;
  --ink-invert: #f4f7fb;
  --line: rgba(12, 18, 28, 0.1);
  --line-strong: rgba(12, 18, 28, 0.2);

  --accent-deep: #2aa7d6; /* readable cyan-blue on light */
  --accent-ink: #053240; /* text on a cyan fill */
  --accent-glow: rgba(70, 170, 230, 0.4);
  /* status "bereikbaar": op licht moet het groen dieper, het mintgroen uit dark
     is op wit glas nauwelijks te lezen */
  --ok: #0a6b3e;
  --ok-glow: rgba(10, 107, 62, 0.4);
  /* readable emphasis gradient on light backgrounds */
  --grad-text: linear-gradient(118deg, #11a0d0 0%, #1f7fe0 100%);
  /* gevulde accent-vlakken (schakelaars, actieve chips, badges): op licht moet
     het diepere blauw pakken, de merk-gradient begint daar bijna wit en valt weg */
  --grad-switch: linear-gradient(118deg, #11a0d0 0%, #1f7fe0 100%);
  --switch-ink: #f4fbff; /* tekst op die diepere vulling */
  /* laptop-screen gradient stops: mirrors de merk-gradient (--grad-accent) in light */
  --screen-1: #c6faff;
  --screen-2: #aef5fd;
  --screen-3: #6fc8f5;
  --screen-4: #4f93ff;

  --glass-fill: rgba(255, 255, 255, 0.5);
  --glass-fill-strong: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-hi: rgba(255, 255, 255, 0.98);
  --glass-shadow: rgba(18, 30, 45, 0.16);
  --glass-tint: rgba(120, 210, 255, 0.14);

  /* aurora mesh colours (subtle on light) */
  --mesh-1: rgba(174, 245, 253, 0.42);
  --mesh-2: rgba(120, 180, 255, 0.32);
  --mesh-3: rgba(180, 220, 255, 0.3);
  --mesh-alpha: 0.32;

  --shadow-soft: 0 30px 70px -34px rgba(18, 30, 45, 0.4);
  --shadow-lift: 0 44px 100px -34px rgba(18, 30, 45, 0.48);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #06080d;
  --bg-2: #0d1119;
  --bg-3: #131824;
  --bg-contrast: #04060a;
  --ink: #eef3f9;
  --ink-soft: #9ba7b5;
  --ink-faint: #5e6a78;
  --ink-invert: #0a0e16;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.2);

  --accent-deep: #aef5fd;
  --accent-ink: #04181b;
  --accent-glow: rgba(102, 198, 255, 0.6);
  --ok: #7fe0a7;
  --ok-glow: rgba(127, 224, 167, 0.7);
  --grad-text: var(--grad-text-dark);
  --grad-switch: var(--grad-accent);
  --switch-ink: var(--accent-ink);
  /* laptop-screen gradient stops: mirrors de dark-variant gradient (--grad-text) */
  --screen-1: #c6faff;
  --screen-2: #a9ecfb;
  --screen-3: #8fe2fb;
  --screen-4: #6fb0ff;

  --glass-fill: rgba(20, 28, 42, 0.5);
  --glass-fill-strong: rgba(24, 34, 50, 0.62);
  --glass-border: rgba(174, 245, 253, 0.22);
  --glass-hi: rgba(190, 240, 255, 0.55);
  --glass-shadow: rgba(0, 0, 0, 0.6);
  --glass-tint: rgba(102, 198, 255, 0.12);

  /* aurora mesh colours (rich on dark) */
  --mesh-1: rgba(64, 196, 255, 0.36);
  --mesh-2: rgba(40, 110, 255, 0.3);
  --mesh-3: rgba(120, 240, 255, 0.26);
  --mesh-alpha: 0.7;

  --shadow-soft: 0 34px 90px -34px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 50px 120px -34px rgba(0, 0, 0, 0.9);

  color-scheme: dark;
}