/**
 * جهان ترانه — Design tokens
 * OpenDesign + ThreeUI
 */
:root {
  /* OpenDesign / Spotify-inspired */
  --od-bg-base: #0a0a0f;
  --od-bg-surface: #12121a;
  --od-bg-elevated: #1a1a24;
  --od-bg-hover: #22222e;
  --od-accent: #1ed760;
  --od-accent-hover: #1bc85a;
  --od-accent-glow: rgba(30, 215, 96, 0.35);
  --od-text: #f5f5f7;
  --od-text-muted: #a1a1aa;
  --od-text-dim: #71717a;
  --od-line: rgba(255, 255, 255, 0.08);
  --od-line-strong: rgba(255, 255, 255, 0.14);
  --od-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --od-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --od-inset-border: inset 0 0 0 1px rgba(124, 124, 124, 0.35);
  --od-surface-glass: rgba(18, 18, 26, 0.72);
  --od-surface-soft: rgba(255, 255, 255, 0.045);
  --od-focus-ring: 0 0 0 4px rgba(30, 215, 96, 0.16);

  /* ThreeUI immersive */
  --tu-glow: #8b5cf6;
  --tu-glow-soft: rgba(139, 92, 246, 0.25);
  --tu-cyan: #22d3ee;
  --tu-cyan-soft: rgba(34, 211, 238, 0.15);
  --tu-space: #050508;

  /* Map legacy app.css vars */
  --primary: var(--tu-glow);
  --primary-glow: var(--tu-glow-soft);
  --primary-dark: #6d28d9;
  --accent: var(--od-accent);
  --yellow: #fbbf24;
  --bg: var(--od-bg-base);
  --bg-elevated: var(--od-bg-elevated);
  --bg-card: var(--od-bg-surface);
  --bg-hover: var(--od-bg-hover);
  --text: var(--od-text);
  --text-muted: var(--od-text-muted);
  --line: var(--od-line);
  --radius: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --sidebar-w: 260px;
  --header-h: 68px;
  --player-h: 92px;
  --nav-h: 64px;
  --glass: rgba(18, 18, 26, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --font-display: "Vazirmatn", "Tahoma", sans-serif;
}

:root[data-theme="light"] {
  --od-bg-base: #f4f6fb;
  --od-bg-surface: #ffffff;
  --od-bg-elevated: #eef1f7;
  --od-bg-hover: #e5e9f2;
  --od-accent: #159447;
  --od-accent-hover: #107c3b;
  --od-accent-glow: rgba(21, 148, 71, 0.2);
  --od-text: #171927;
  --od-text-muted: #596174;
  --od-text-dim: #7a8498;
  --od-line: rgba(25, 35, 58, 0.11);
  --od-line-strong: rgba(25, 35, 58, 0.18);
  --od-shadow-lg: 0 16px 42px rgba(31, 42, 68, 0.14);
  --od-shadow-card: 0 10px 26px rgba(31, 42, 68, 0.1);
  --od-inset-border: inset 0 0 0 1px rgba(25, 35, 58, 0.1);
  --od-surface-glass: rgba(255, 255, 255, 0.78);
  --od-surface-soft: rgba(25, 35, 58, 0.045);
  --od-focus-ring: 0 0 0 4px rgba(21, 148, 71, 0.16);
  --tu-glow: #7651d7;
  --tu-glow-soft: rgba(118, 81, 215, 0.17);
  --tu-cyan: #078da8;
  --tu-cyan-soft: rgba(7, 141, 168, 0.12);
  --tu-space: #e9edf7;
  --primary-dark: #5d3ab3;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(25, 35, 58, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-safe: 0;
  }
}