/* Spotify Clone - CSS Variables */
:root {
    /* Spotify Colors */
    --spotify-green: #1db954;
    --spotify-green-hover: #1ed760;
    --spotify-black: #191414;
    --spotify-dark-gray: #121212;
    --spotify-gray: #282828;
    --spotify-light-gray: #b3b3b3;
    --spotify-white: #ffffff;
    --spotify-text-gray: #a7a7a7;
    
    /* Background Colors */
    --bg-base: #000000;
    --bg-elevated-base: #121212;
    --bg-elevated-highlight: #1a1a1a;
    --bg-elevated-press: #000000;
    --bg-tinted-base: #121212;
    --bg-tinted-highlight: #1a1a1a;
    --bg-tinted-press: #000000;
    --bg-subdued: #121212;
    --bg-subdued-highlight: #1a1a1a;
    
    /* Text Colors */
    --text-base: #ffffff;
    --text-subdued: #b3b3b3;
    --text-bright-accent: #1db954;
    --text-negative: #f15e6c;
    --text-warning: #ffa42b;
    --text-positive: #1db954;
    --text-announcement: #3d91f4;
    
    /* Border */
    --border-base: #282828;
    --border-bright: #535353;
    --border-subdued: #2a2a2a;
    
    /* Essential */
    --essential-base: #ffffff;
    --essential-subdued: #6a6a6a;
    --essential-bright-accent: #1db954;
    --essential-negative: #e22134;
    --essential-warning: #ffa42b;
    --essential-positive: #1db954;
    --essential-announcement: #0d72ea;
    
    /* Interactive */
    --interactve-base: #b3b3b3;
    --interactive-hover: #ffffff;
    --interactive-press: #cccccc;
    
    /* Decorative */
    --decorative-base: #ffffff;
    --decorative-subdued: #292929;
    
    /* Misc */
    --misc-card-image-shadow: rgba(0, 0, 0, 0.6);
    --misc-non-text-subdued: #4d4d4d;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Border Radius */
    --border-radius-xs: 2px;
    --border-radius-s: 4px;
    --border-radius-m: 6px;
    --border-radius-l: 8px;
    --border-radius-xl: 12px;
    --border-radius-round: 50%;
    
    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-l: 16px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* Line Heights */
    --line-height-xs: 12px;
    --line-height-s: 16px;
    --line-height-m: 20px;
    --line-height-l: 24px;
    --line-height-xl: 32px;
    --line-height-xxl: 40px;
    --line-height-xxxl: 56px;
    
    /* Shadows */
    --shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 32px 64px rgba(0, 0, 0, 0.5);
    
    /* Z-index */
    --z-index-base: 1;
    --z-index-elevated: 2;
    --z-index-overlay: 3;
    --z-index-modal: 4;
    --z-index-popover: 5;
    --z-index-tooltip: 6;
    
    /* Layout */
    --sidebar-width: 240px;
    --topbar-height: 64px;
    --player-height: 90px;
    --content-spacing: 24px;
    
    /* Transitions */
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-fast: 0.1s ease;
    
    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;
}