/**
 * CSS Variables - Design System
 * Style: Mario Kart + Spotify (Néon/Gaming)
 */

:root {
    /* Colors - Dark Theme */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #1e1e2d;
    --bg-card-hover: #252538;
    
    /* Accent Colors */
    --accent-primary: #1DB954;      /* Spotify Green */
    --accent-secondary: #00d4ff;    /* Cyan Neon */
    --accent-tertiary: #ff00ff;     /* Magenta */
    --accent-warning: #ffaa00;      /* Orange */
    --accent-danger: #ff4757;       /* Red */
    --accent-purple: #9b59b6;       /* Purple */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1DB954, #00d4ff);
    --gradient-neon: linear-gradient(135deg, #00d4ff, #ff00ff);
    --gradient-fire: linear-gradient(135deg, #ff4757, #ffaa00);
    --gradient-purple: linear-gradient(135deg, #9b59b6, #ff00ff);
    --gradient-dark: linear-gradient(180deg, #0a0a0f, #12121a);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    
    /* Neon Glows */
    --glow-green: 0 0 20px rgba(29, 185, 84, 0.5), 0 0 40px rgba(29, 185, 84, 0.3);
    --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
    --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3);
    --glow-white: 0 0 10px rgba(255, 255, 255, 0.3);
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Typography */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-size-huge: 3rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-background: -1;
    --z-default: 1;
    --z-header: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-toast: 400;
}