/* Apple Music Design System - CSS Variables */
:root {
    /* Apple Music Brand Colors */
    --apple-red: #FA233B;
    --apple-red-light: #FF3B5C;
    --apple-pink: #FF2D55;
    --apple-gradient: linear-gradient(135deg, #FA233B 0%, #FF2D55 100%);
    
    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-elevated: #1C1C1E;
    --bg-grouped: #1C1C1E;
    
    /* Surface Colors */
    --surface-primary: rgba(28, 28, 30, 0.8);
    --surface-secondary: rgba(44, 44, 46, 0.8);
    --surface-overlay: rgba(0, 0, 0, 0.5);
    --surface-blur: rgba(28, 28, 30, 0.72);
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --text-quaternary: rgba(255, 255, 255, 0.2);
    --text-accent: var(--apple-red);
    
    /* System Colors */
    --system-blue: #0A84FF;
    --system-green: #30D158;
    --system-indigo: #5E5CE6;
    --system-orange: #FF9F0A;
    --system-purple: #BF5AF2;
    --system-teal: #64D2FF;
    --system-yellow: #FFD60A;
    
    /* Separator Colors */
    --separator: rgba(255, 255, 255, 0.1);
    --separator-opaque: rgba(60, 60, 67, 0.36);
    
    /* Fill Colors */
    --fill-primary: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --fill-quaternary: rgba(116, 116, 128, 0.18);
    
    /* Typography - SF Pro */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
    --font-family-rounded: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', sans-serif;
    
    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 34px;
    --text-4xl: 40px;
    
    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-heavy: 800;
    
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.4;
    --leading-relaxed: 1.6;
    
    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    
    /* Spacing */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 28px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-artwork: 0 8px 28px rgba(0, 0, 0, 0.5);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Blur */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;
    --blur-xl: 40px;
    
    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-max: 9999;
    
    /* Layout */
    --header-height: 52px;
    --tab-bar-height: 83px;
    --mini-player-height: 64px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* Content Width */
    --content-max-width: 1200px;
    --sidebar-width: 260px;
    
    /* Component Specific */
    --artwork-size-sm: 48px;
    --artwork-size-md: 80px;
    --artwork-size-lg: 160px;
    --artwork-size-xl: 260px;
    --card-width: 160px;
    --card-height: 200px;
}

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
    :root {
        --safe-area-top: max(env(safe-area-inset-top, 0px), 0px);
        --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    }
}