/* ==========================================================================
   Design tokens — the single source of truth for color, type, spacing,
   and motion. Every other stylesheet reads these custom properties; none
   of them should hardcode a raw color or font value.
   ========================================================================== */

/* Self-hosted fonts — no external requests.
   Overlay Display (Unbounded)  → headlines, wordmark, big numerals
   Overlay Body (Manrope)       → paragraphs, UI text
   Overlay Mono (JetBrains Mono)→ timestamps, eyebrows, technical labels */
@font-face {
  font-family: "Overlay Display";
  src: url("../assets/fonts/Unbounded-Variable.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overlay Body";
  src: url("../assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overlay Mono";
  src: url("../assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- brand palette — pulled directly from the real app's own tokens:
     LyricPlayer/tailwind.config.js (brand.DEFAULT/from/to) and
     shared/types.ts DEFAULT_SETTINGS (activeTextColor/inactiveTextColor).
     Not a design choice made for this site — this is what the product already is. ---- */
  --bg: #121212;
  --surface: #181818;
  --surface-raised: #1e1e25;
  --surface-hover: #232329;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #ffffff;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;

  --brand: #4cbb17;
  --brand-from: #6fd32d;
  --brand-to: #4cbb17;
  --gradient: linear-gradient(100deg, var(--brand-from) 0%, var(--brand-to) 100%);
  --gradient-soft: linear-gradient(100deg, rgba(111, 211, 45, 0.16) 0%, rgba(76, 187, 23, 0.16) 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-lift: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 8px 30px -6px rgba(76, 187, 23, 0.4);

  --font-display: "Overlay Display", "Segoe UI Semibold", system-ui, sans-serif;
  --font-body: "Overlay Body", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Overlay Mono", "Cascadia Code", ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  --lyric-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --content-max: 1180px;
}