/* ============================================================
   WAVES — Root Variables (SPX Design System)
   ============================================================ */

   :root {
    /* ===== SPX Colors ===== */
    /* Primary */
    --spx-violet: #7B5CFF;
    --spx-violet-dark: #5E46C6;
    --spx-violet-light: #9B7FFF;
    --spx-violet-glow: rgba(123, 92, 255, 0.2);
  
    /* Backgrounds */
    --bg-primary: #0B0E14;
    --bg-secondary: #11151F;
    --bg-elevated: #1A1F2B;
    --bg-hover: #222836;
    
    /* Text */
    --text-primary: #E6E8F0;
    --text-secondary: #8B90A3;
    --text-muted: #5A5F73;
    
    /* Status Colors */
    --success: #3CFFB0;
    --info: #3DA9FC;
    --error: #FF4C4C;
    --warning: #FFC940;
  
    /* Legacy support (from old root) */
    --bg: #0B0E14;
    --fg: #E6E8F0;
    --accent: #7B5CFF;
  
    /* ===== Spacing ===== */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1rem;       /* 16px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */
  
    /* ===== Typography ===== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  
    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
  
    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
  
    /* ===== Borders & Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
  
    --border-width: 1px;
    --border-color: #1A1F2B;
    --border-hover: #2A3040;
  
    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  
    /* ===== Transitions ===== */
    --transition-fast: 100ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;
  
    /* ===== Z-Index Scale ===== */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-sidebar: 30;
    --z-player: 40;
    --z-modal: 50;
    --z-toast: 60;
  
    /* ===== Layout ===== */
    --sidebar-width: 220px;
    --player-height: 88px;
    --header-height: 64px;
  
    /* ===== Player Specific ===== */
    --progress-height: 4px;
    --progress-thumb: 12px;
    --control-size-sm: 40px;
    --control-size-md: 48px;
    --control-size-lg: 56px;
  }
  
  /* ============================================================
     Base Reset
     ============================================================ */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  /* ============================================================
     Scrollbar Styling
     ============================================================ */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
  }
  
  /* ============================================================
     Selection
     ============================================================ */
  ::selection {
    background: var(--spx-violet-glow);
    color: var(--text-primary);
  }
  
  ::-moz-selection {
    background: var(--spx-violet-glow);
    color: var(--text-primary);
  }
  
  /* ============================================================
     Focus Styles
     ============================================================ */
  :focus-visible {
    outline: 2px solid var(--spx-violet);
    outline-offset: 2px;
  }
  
  /* ============================================================
     Utility Classes
     ============================================================ */
  .hidden {
    display: none !important;
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* ============================================================
     Reduced Motion
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }