/* ═══════════════════════════════════════════════════════════════
   Webradio Manager v2 — Design Tokens / Variables CSS
   Dark Mode Premium · Sobre · Professionnel
   ═══════════════════════════════════════════════════════════════ */

/* Light theme */
.light-theme,
[data-theme="light"] {
  --bg-primary:     #f5f5f7;
  --bg-secondary:   #ffffff;
  --bg-tertiary:    #e8e8ed;
  --bg-card:        #ffffff;
  --bg-hover:       #dcdce0;
  --bg-input:       #f0f0f2;
  --bg-overlay:     rgba(0, 0, 0, 0.2);

  --accent:         #6366f1;
  --accent-hover:   #818cf8;
  --accent-dim:     rgba(99, 102, 241, 0.12);
  --accent-glow:    rgba(99, 102, 241, 0.25);
  --accent-contrast: #ffffff;

  --text-primary:   #1a1a2e;
  --text-secondary: #55556a;
  --text-muted:     #8888a0;
  --text-disabled:  #b0b0c0;

  --border:         #d4d4dc;
  --border-light:   #e0e0e8;
  --slider-track:   #d4d4dc;
}

:root {
  /* ── Palette principale ── */
  --bg-primary:     #0d0d0f;
  --bg-secondary:   #141418;
  --bg-tertiary:    #1c1c24;
  --bg-card:        #1e1e26;
  --bg-hover:       #252530;
  --bg-input:       #18181f;
  --bg-overlay:     rgba(0, 0, 0, 0.6);

  /* ── Accent ── */
  --accent:         #00d4ff;
  --accent-hover:   #33ddff;
  --accent-dim:     rgba(0, 212, 255, 0.15);
  --accent-glow:    rgba(0, 212, 255, 0.3);
  --accent-contrast: #0d0d0f;

  /* ── CTA / DJ ── */
  --hot-pink:       #ff2d78;
  --hot-pink-hover: #ff5a9e;
  --hot-pink-dim:   rgba(255, 45, 120, 0.15);

  /* ── Feedback ── */
  --success:        #22c55e;
  --success-dim:    rgba(34, 197, 94, 0.15);
  --warning:        #f59e0b;
  --warning-dim:    rgba(245, 158, 11, 0.15);
  --danger:         #ef4444;

  /* ── Waveform / Loop ── */
  --loop-color:     rgba(0, 212, 255, 0.08);
  --loop-stroke:    rgba(0, 212, 255, 0.45);
  --danger-dim:     rgba(239, 68, 68, 0.15);

  /* ── Texte ── */
  --text-primary:   #e8e8f0;
  --text-secondary: #8888a0;
  --text-muted:     #55556a;
  --text-disabled:  #3a3a4a;

  /* ── Bordures ── */
  --border:         #2a2a38;
  --border-light:   #33334a;
  --border-focus:   var(--accent);

  /* ── Sliders / EQ ── */
  --eq-low:         #22c55e;
  --eq-mid:         #f59e0b;
  --eq-high:        #ef4444;
  --slider-track:   #2a2a38;
  --slider-thumb:   var(--accent);

  /* ── VU-meter ── */
  --vu-green:       #22c55e;
  --vu-yellow:      #f59e0b;
  --vu-red:         #ef4444;

  /* ── Spacing ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-2xl: 32px;

  /* ── Border radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(0,212,255,0.15);

  /* ── Transition ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration:   200ms;
  --duration-fast: 150ms;

  /* ── Typo ── */
  --font:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --fs-xs:    10px;
  --fs-sm:    12px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    20px;
  --fs-2xl:   24px;

  /* ── Spacing aliases (used by components/mixer/library/playlist CSS) ── */
  --space-xs: var(--sp-xs);
  --space-sm: var(--sp-sm);
  --space-md: var(--sp-md);
  --space-lg: var(--sp-lg);

  /* ── Missing variable aliases ── */
  --text-tertiary:   var(--text-muted);
  --bg-elevated:     var(--bg-card);
  --accent-secondary: var(--hot-pink);
  --border-dim:      var(--border-light);
  --radius-round:    var(--radius-lg);
  --transition-fast: var(--duration) var(--ease);
  --font-family:     var(--font);
  --text:            var(--text-primary);

  /* ── Layout ── */
  --sidebar-w:    220px;
  --footer-h:     40px;
  --header-h:     48px;
}