:root {
  /* ===== Brand Colors ===== */
  --color-primary: #DC143C;
  --color-primary-rgb: 220, 20, 60;
  --color-secondary: #8A2BE2;
  --color-secondary-rgb: 138, 43, 226;
  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));

  /* ===== Light Theme ===== */
  --bg-base: #f4f5fa;
  --bg-elevated: rgba(255, 255, 255, 0.45);
  --border-glass: rgba(255, 255, 255, 0.4);
  --text-primary: #14141c;
  --text-secondary: #4a4a58;
  --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.12);
  --bg-overlay: rgba(255, 255, 255, 0.7);

  /* ===== Glassmorphism Tokens (shared) ===== */
  --glass-blur: 12px;
  --glass-saturate: 480%;
  --radius-card: 20px;
  --radius-pill: 999px;

  /*
   * ===== Typography =====
   * NOTE: This list is intentionally short. It previously carried ~15 additional
   * font tokens (Barlow, Comfortaa, Dancing Script, Lobster, Montserrat, Oswald,
   * Roboto, Waterfall, etc.) left over from early design exploration. None of
   * those families were ever referenced by a CSS rule — they were dead tokens
   * pointing at font-families that base.css doesn't even import anymore after
   * the performance pass (see base.css comment). Keeping unused tokens around
   * is a trap: a future dev reaches for var(--font-whatever), assumes it's a
   * loaded webfont because it "looks official" here, and ships a silent
   * system-font fallback. Only the four families actually in use are declared.
   * If you deliberately want a new display/accent face, add the @font-face
   * import to base.css AND the token here in the same commit.
   */
  --font-display: 'Lilita One', cursive;
  --font-body: 'Sniglet', cursive;
  --font-accent: 'Pacifico', cursive;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-medium: 400ms;
  --dur-slow: 700ms;
}

[data-theme="dark"] {
  --bg-base: #0b0b12;
  --bg-elevated: rgba(20, 20, 30, 0.55);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text-primary: #f4f5fa;
  --text-secondary: #b3b3c2;
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45);
  --bg-overlay: rgba(0, 0, 0, 0.8);
}