/* ---------------------------------------------------------------
   Design tokens
   Every frame is a fixed 1600x900 canvas (see canvas.css) that the
   camera scales to fit the viewport — so all sizing below is fixed
   px, authored for that canvas, NOT viewport-relative (vw/clamp).
   A px value scales correctly with the camera's CSS transform;
   a vw value would not (it re-measures the real viewport regardless
   of zoom level), so vw/clamp sizing is intentionally avoided
   everywhere inside a .frame.

   Themes are scoped two ways:
   - `.frame[data-theme="dark|light"]` — self-contained per-frame
     theming, since dark and light frames coexist in the DOM at once.
   - `body.theme-dark|theme-light` — the fixed HUD chrome (brandmark,
     nav rail, counter) follows whichever frame is currently focused,
     toggled by js/camera.js.
--------------------------------------------------------------- */
:root {
  /* type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* fixed type scale, authored for the 1600x900 frame canvas */
  --fs-eyebrow: 15px;
  --fs-body: 19px;
  --fs-lead: 23px;
  --fs-h3: 30px;
  --fs-h2: 50px;
  --fs-h1: 74px;
  --fs-stat: 60px;

  /* spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 26px;
  --space-lg: 44px;
  --space-xl: 68px;

  /* frame canvas */
  --frame-w: 1600px;
  --frame-h: 900px;
  --frame-pad: 96px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;

  /* z-index */
  --z-world: 1;
  --z-hud: 100;
  --z-overlay: 200;

  /* accent hues — constant identity across both themes */
  --hue-blue: 199;
  --hue-amber: 36;
}

/* -----------------------------------------------------------
   DARK theme — Hero, Story, Scenario, Challenge, Interlude
----------------------------------------------------------- */
body.theme-dark,
.frame[data-theme="dark"] {
  --bg: #05070c;
  --bg-1: #090d16;
  --bg-2: #0e1420;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f4f2ec;
  --text-dim: rgba(244, 242, 236, 0.68);
  --text-faint: rgba(244, 242, 236, 0.4);

  --blue: hsl(var(--hue-blue) 78% 62%);
  --blue-dim: hsl(var(--hue-blue) 60% 40%);
  --amber: hsl(var(--hue-amber) 82% 62%);
  --amber-dim: hsl(var(--hue-amber) 60% 40%);

  --glow-blue: 0 0 60px hsla(var(--hue-blue), 80%, 55%, 0.35);
  --glow-amber: 0 0 60px hsla(var(--hue-amber), 80%, 55%, 0.3);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* -----------------------------------------------------------
   LIGHT theme — Cresyn onward through CTA + Explore
----------------------------------------------------------- */
body.theme-light,
.frame[data-theme="light"] {
  --bg: #faf8f4;
  --bg-1: #ffffff;
  --bg-2: #f1efe9;
  --surface: rgba(10, 26, 47, 0.035);
  --surface-strong: rgba(10, 26, 47, 0.06);
  --border: rgba(10, 26, 47, 0.09);
  --border-strong: rgba(10, 26, 47, 0.16);

  --text: #101820;
  --text-dim: rgba(16, 24, 32, 0.66);
  --text-faint: rgba(16, 24, 32, 0.42);

  --blue: hsl(var(--hue-blue) 74% 42%);
  --blue-dim: hsl(var(--hue-blue) 60% 88%);
  --amber: hsl(var(--hue-amber) 70% 42%);
  --amber-dim: hsl(var(--hue-amber) 70% 90%);

  --glow-blue: 0 0 50px hsla(var(--hue-blue), 70%, 50%, 0.18);
  --glow-amber: 0 0 50px hsla(var(--hue-amber), 70%, 50%, 0.16);
  --shadow-card: 0 20px 50px rgba(16, 24, 32, 0.09);

  color-scheme: light;
}