/* ==========================================================================
   variables.css — WINAMP 2026
   Modern dark UI with Winamp DNA.
   All values here serve as defaults — skin-manager.js overrides them
   on init and skin change.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Core Background Colors
     -------------------------------------------------------------------------- */
  --bg-page:           #0a0a0f;
  --bg-player:         #1a1a24;
  --bg-panel:          #12121a;
  --bg-deep:           #0d0d14;
  --bg-input:          #0e0e16;

  /* --------------------------------------------------------------------------
     Border & Separator
     -------------------------------------------------------------------------- */
  --border:            #2a2a3a;
  --border-subtle:     #1e1e2c;
  --border-focus:      #3a3a4a;

  /* --------------------------------------------------------------------------
     Text Colors
     -------------------------------------------------------------------------- */
  --text-primary:      #e0e0e8;
  --text-secondary:    rgba(224, 224, 232, 0.7);
  --text-dim:          rgba(224, 224, 232, 0.4);
  --text-dimmer:       rgba(224, 224, 232, 0.25);

  /* --------------------------------------------------------------------------
     Accent — Vivid Winamp Green (Classic skin default)
     -------------------------------------------------------------------------- */
  --accent:            #00ff66;
  --accent-dim:        #00cc52;
  --accent-glow:       rgba(0, 255, 102, 0.4);
  --accent-glow-strong: rgba(0, 255, 102, 0.6);
  --accent-glow-wide:  rgba(0, 255, 102, 0.15);
  --accent-bg:         rgba(0, 255, 102, 0.08);
  --accent-bg-dim:     #1a2e1a;

  /* --------------------------------------------------------------------------
     LCD Display
     -------------------------------------------------------------------------- */
  --lcd-bg:            #0a120a;
  --lcd-text:          #00ff66;
  --lcd-dim:           #2a3a2a;
  --lcd-glow:          rgba(0, 255, 102, 0.5);
  --lcd-glow-wide:     rgba(0, 255, 102, 0.2);

  /* --------------------------------------------------------------------------
     Danger / Peak
     -------------------------------------------------------------------------- */
  --danger:            #ff4444;
  --danger-glow:       rgba(255, 68, 68, 0.4);

  /* --------------------------------------------------------------------------
     Playlist Colors
     -------------------------------------------------------------------------- */
  --playlist-bg:       #0d0d14;
  --playlist-text:     #b0b0c0;
  --playlist-number:   rgba(176, 176, 192, 0.6);
  --playlist-hover:    rgba(255, 255, 255, 0.04);
  --playlist-playing:  rgba(0, 255, 102, 0.06);

  /* --------------------------------------------------------------------------
     Visualizer
     -------------------------------------------------------------------------- */
  --viz-bg:            #080810;
  --viz-primary:       #00ff66;
  --viz-secondary:     #00cc52;
  --viz-peak:          #ff4444;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-tight:      0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-medium:     0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-wide:       0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-inset:      inset 0 1px 4px rgba(0, 0, 0, 0.5);

  /* --------------------------------------------------------------------------
     Radius
     -------------------------------------------------------------------------- */
  --radius-outer:      8px;
  --radius-inner:      4px;
  --radius-small:      3px;

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */
  --font-mono:         'Share Tech Mono', 'SF Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --transition-fast:   80ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   300ms ease;
  --transition-panel:  300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --container-max-width: 540px;
}