/* ─────────────────────────────────────────────────────────────
   TOKENS — the only file you need to touch to re-skin the site.
   Dark is the default theme. Light overrides it via [data-theme="light"].
   ───────────────────────────────────────────────────────────── */

:root {
  /* Type */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-xl: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);   /* section titles */
  --fs-2xl: clamp(1.625rem, 1rem + 2.6vw, 3.25rem);    /* about statement */
  --fs-hero: clamp(2.5rem, 1.3rem + 4.2vw, 4.5rem);    /* hero title */

  /* Space & layout */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --container: 1240px;
  --stage-max: 1480px;
  --space-section: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);
  --nav-h: 72px;
  --pad-x: clamp(1rem, 3vw, 2rem);   /* inner padding of stage panels and nav */

  /* Shape */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;

  /* Brand colors that do not change with the theme */
  --blue: #004af5;
  --sky: #0097f5;
  --cyan: #00e4f5;
  --mint: #00f5b3;

  /* Feature panel (Stack): same saturated blue in both themes */
  --feature-bg: linear-gradient(180deg, #0b36c8 0%, #0a2590 55%, #08196b 100%);
}

/* ── DARK (default) — the original palette ─────────────────── */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #03060f;
  --surface: #070d1c;
  --card: #0a1228;
  --card-hover: #0d1733;
  --stage: linear-gradient(180deg, #0b1633 0%, #08102a 100%);

  --line: rgba(140, 170, 255, 0.14);
  --line-strong: rgba(120, 190, 255, 0.34);

  --ink: #e8f0ff;
  --ink-2: #9dacc8;
  --ink-3: #7c8db0;

  --accent: #00e4f5;          /* links, focus, small highlights */
  --accent-strong: #0097f5;
  --on-accent: #03060f;

  --btn-bg: #e8f0ff;
  --btn-fg: #03060f;
  --btn-circle: #00e4f5;
  --btn-circle-fg: #03060f;

  --arch-top: #0a4bff;
  --arch-bottom: #1f9bff;
  --ghost: rgba(232, 240, 255, 0.1);

  --glass: rgba(9, 16, 38, 0.62);
  --pill-bg: #f2f6ff;
  --pill-fg: #03060f;
  --nav-bg: rgba(7, 13, 28, 0.78);

  --shadow-card: 0 28px 56px -28px rgba(0, 20, 90, 0.7);
  --thumb-overlay: linear-gradient(180deg, rgba(3, 6, 15, 0.62) 0%, rgba(3, 6, 15, 0) 34%, rgba(3, 6, 15, 0) 52%, rgba(3, 6, 15, 0.72) 100%);
  --scroll-thumb: rgba(0, 151, 245, 0.45);
}

/* ── LIGHT — cool gray stage, ink navy, cobalt accent ──────── */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #eef0f6;
  --surface: #e5e8f1;
  --card: #ffffff;
  --card-hover: #ffffff;
  --stage: linear-gradient(180deg, #d6d9e6 0%, #c9cddc 100%);

  --line: rgba(11, 16, 32, 0.11);
  --line-strong: rgba(10, 63, 224, 0.4);

  --ink: #0b1020;
  --ink-2: #444e6a;
  --ink-3: #5c6684;

  --accent: #0a3fe0;
  --accent-strong: #0a3fe0;
  --on-accent: #ffffff;

  --btn-bg: #0b1020;
  --btn-fg: #ffffff;
  --btn-circle: #0b1020;
  --btn-circle-fg: #ffffff;

  --arch-top: #2f55ff;
  --arch-bottom: #9db0ff;
  --ghost: rgba(255, 255, 255, 0.6);

  --glass: rgba(255, 255, 255, 0.62);
  --pill-bg: #ffffff;
  --pill-fg: #0b1020;
  --nav-bg: rgba(238, 240, 246, 0.82);

  --shadow-card: 0 28px 56px -30px rgba(20, 35, 90, 0.35);
  --thumb-overlay: linear-gradient(180deg, rgba(11, 16, 32, 0.62) 0%, rgba(11, 16, 32, 0) 34%, rgba(11, 16, 32, 0) 52%, rgba(11, 16, 32, 0.72) 100%);
  --scroll-thumb: rgba(10, 63, 224, 0.4);
}