/* ==========================================================================
   tokens.css — single source of truth for the visual language.
   Every colour, size, radius, shadow and timing used on the site resolves to
   a custom property here, so retheming the whole site is a token swap.
   ========================================================================== */

:root {
  /* ---- Palette: Apple Glass (default) -------------------------------- */
  /* System greys, darkest to lightest — the Apple dark-mode stack. */
  --ink-900: #000000;
  --ink-800: #0a0a0b;
  --ink-700: #1c1c1e;
  --ink-600: #2c2c2e;
  --ink-500: #3a3a3c;
  --ink-400: #48484a;

  /* Apple system colours (iOS/macOS dark appearance). */
  --accent: #0071e3;
  --accent-2: #30d158;
  --accent-3: #bf5af2;
  --signal: #ff9f0a;
  --danger: #ff453a;

  --accent-rgb: 0 113 227;
  --accent-2-rgb: 48 209 88;
  --accent-3-rgb: 191 90 242;
  --signal-rgb: 255 159 10;

  --text: #f5f5f7;
  --text-muted: #a1a1a6;
  --text-faint: #86868b;
  --text-strong: #ffffff;

  /* ---- Glass material ------------------------------------------------- */
  --glass-blur: 20px;
  --glass-sat: 150%;
  --glass-bg: linear-gradient(
    152deg,
    rgb(255 255 255 / 0.1),
    rgb(255 255 255 / 0.028)
  );
  --glass-bg-strong: linear-gradient(
    152deg,
    rgb(255 255 255 / 0.16),
    rgb(255 255 255 / 0.05)
  );
  --glass-border: rgb(255 255 255 / 0.14);
  --glass-border-strong: rgb(255 255 255 / 0.24);
  --glass-inner: inset 0 1px 0 rgb(255 255 255 / 0.2);
  --glass-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.7);

  /* ---- Depth / elevation --------------------------------------------- */
  --lift-1: 0 2px 8px -2px rgb(0 0 0 / 0.5);
  --lift-2: 0 14px 34px -12px rgb(0 0 0 / 0.62);
  --lift-3: 0 30px 70px -20px rgb(0 0 0 / 0.72);
  --glow-accent: 0 0 0 1px rgb(var(--accent-rgb) / 0.32),
    0 18px 46px -18px rgb(var(--accent-rgb) / 0.5);

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid scale — min at 360px viewport, max at 1440px.
     --fs-display is tied to the hero copy column (~55% of the viewport) so the
     headline's longest line never outgrows its column and re-wraps inside the
     reveal mask. Do not raise the vw coefficient without re-measuring. */
  --fs-display: clamp(2.2rem, 4.9vw, 4rem);
  --fs-h1: clamp(2.1rem, 1.25rem + 3.4vw, 3.6rem);
  --fs-h2: clamp(1.65rem, 1.15rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.85vw, 1.6rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.3rem);
  --fs-body: clamp(0.97rem, 0.94rem + 0.16vw, 1.06rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.76rem;

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-body: 1.68;
  --ls-display: -0.035em;
  --ls-tight: -0.02em;
  --ls-label: 0.18em;

  /* ---- Space (4px base) ----------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 5rem;
  --s-10: 7rem;
  --s-11: 9rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 3vw, 3.5rem);
  --measure: 68ch;
  --maxw: 1280px;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.4, 1);
  --ease-press: cubic-bezier(0.2, 0.9, 0.3, 1);

  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;
  --dur-4: 760ms;

  /* Motion intensity multiplier, driven by the studio panel */
  --motion: 1;

  /* ---- Layout rails --------------------------------------------------- */
  --rail: clamp(1.15rem, 0.5rem + 3.4vw, 4.5rem);
  --nav-h: 68px;

  color-scheme: dark;
}

/* ---- Palette presets -------------------------------------------------- */
/* All four are drawn from the Apple system colour set so the studio panel
   stays inside one family. */
[data-palette="azure"] {
  --accent: #0071e3;
  --accent-2: #64d2ff;
  --accent-3: #bf5af2;
  --signal: #ffd60a;
  --accent-rgb: 0 113 227;
  --accent-2-rgb: 100 210 255;
  --accent-3-rgb: 191 90 242;
  --signal-rgb: 255 214 10;
}

[data-palette="aurora"] {
  --accent: #30d158;
  --accent-2: #66d4cf;
  --accent-3: #0071e3;
  --signal: #ffd60a;
  --accent-rgb: 48 209 88;
  --accent-2-rgb: 102 212 207;
  --accent-3-rgb: 0 113 227;
  --signal-rgb: 255 214 10;
}

[data-palette="dusk"] {
  --accent: #bf5af2;
  --accent-2: #64d2ff;
  --accent-3: #ff375f;
  --signal: #ff9f0a;
  --accent-rgb: 191 90 242;
  --accent-2-rgb: 100 210 255;
  --accent-3-rgb: 255 55 95;
  --signal-rgb: 255 159 10;
}

[data-palette="ember"] {
  --accent: #ff9f0a;
  --accent-2: #ffd60a;
  --accent-3: #ff453a;
  --signal: #30d158;
  --accent-rgb: 255 159 10;
  --accent-2-rgb: 255 214 10;
  --accent-3-rgb: 255 69 58;
  --signal-rgb: 48 209 88;
}

/* ---- Glass density ---------------------------------------------------- */
[data-glass="low"] {
  --glass-blur: 8px;
  --glass-sat: 115%;
  --glass-bg: linear-gradient(152deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.018));
  --glass-border: rgb(255 255 255 / 0.09);
  --glass-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.6);
}

[data-glass="high"] {
  --glass-blur: 30px;
  --glass-sat: 180%;
  --glass-bg: linear-gradient(152deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.05));
  --glass-border: rgb(255 255 255 / 0.22);
  --glass-shadow: 0 32px 80px -22px rgb(0 0 0 / 0.78);
}

/* ---- Background modes ------------------------------------------------- */
[data-bg="still"] .bg__blob,
[data-bg="still"] .bg__mesh,
[data-bg="still"] .matrix-column { animation-play-state: paused; }
[data-bg="mesh"] .bg__blob { opacity: 0.32; }
[data-bg="mesh"] .matrix-container { opacity: 0.14; }
[data-bg="still"] .matrix-container { opacity: 0.18; }