/* ==========================================================================
   DESIGN TOKENS — Ocean Birthday
   A descent into a bioluminescent deep sea at twilight.
   ========================================================================== */

:root {
  /* ---- Color: depth gradient from surface to abyss ---- */
  --c-surface: #4f0c2f;       /* near-surface pink */
  --c-mid: #3d0420;           /* mid ocean */
  --c-deep: #280615;          /* deep ocean */
  --c-abyss: #1a020c;         /* abyssal black-rose */

  --c-bio-cyan: #e03ec6;      /* bioluminescent pink accent */
  --c-bio-cyan-soft: #f08fe3;
  --c-bio-gold: #ffd76a;      /* warm light-ray / sun-shaft accent */
  --c-bio-gold-soft: #ffe9a8;
  --c-coral: #ff8a7a;         /* rare warm accent for emphasis */

  --c-foam: #fff4f9;          /* primary text on dark */
  --c-foam-dim: rgba(255, 244, 249, 0.72);
  --c-foam-faint: rgba(255, 244, 249, 0.45);
  --c-line: rgba(255, 244, 249, 0.12);
  --c-line-strong: rgba(255, 244, 249, 0.22);

  /* ---- Glass / panel surfaces ---- */
  --c-panel: rgba(61, 13, 37, 0.46);
  --c-panel-strong: rgba(44, 8, 26, 0.82);
  --c-panel-border: rgba(240, 143, 227, 0.16);
  --c-panel-border-hover: rgba(240, 143, 227, 0.4);
  --panel-blur: blur(20px) saturate(150%);

  /* ---- Seam dividers: translucent so they blend at any scroll position ---- */
  --c-seam-mid: rgba(52, 8, 30, 0.62);
  --c-seam-deep: rgba(30, 5, 17, 0.68);
  --c-seam-abyss: rgba(18, 2, 9, 0.74);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --fs-display-xl: clamp(2.8rem, 8vw, 7rem);
  --fs-display-lg: clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-display-md: clamp(1.6rem, 3.6vw, 2.8rem);
  --fs-body-lg: clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-body: clamp(0.98rem, 1.1vw, 1.08rem);
  --fs-caption: 0.78rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-relaxed: 1.7;

  --tracking-wide: 0.18em;
  --tracking-wider: 0.28em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.8rem;
  --sp-5: 2.8rem;
  --sp-6: 4.2rem;
  --sp-7: 6.5rem;
  --sp-8: 9.5rem;

  --section-pad-y: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --content-max: 1180px;
  --content-narrow: 760px;

  /* ---- Radii & shadows ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-glow-cyan: 0 0 40px rgba(224, 62, 198, 0.25);
  --shadow-glow-cyan-lg: 0 0 60px rgba(224, 62, 198, 0.38);
  --shadow-glow-gold: 0 0 50px rgba(255, 215, 106, 0.2);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 22px 48px rgba(0, 0, 0, 0.4), 0 0 32px rgba(224, 62, 198, 0.14);
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 244, 249, 0.06) inset;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --dur-fast: 0.25s;
  --dur-base: 0.6s;
  --dur-slow: 1.1s;

  --nav-h: 76px;
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-player: 90;
  --z-overlay: 200;
  --z-loader: 1000;
  --z-pin: 10000;
}

@media (max-width: 720px) {
  :root {
    --nav-h: 64px;
    --section-pad-y: clamp(3.5rem, 10vh, 6rem);
  }
}