/* ============================================
   MELODICSODA - Design Tokens
   Underground Urbano Premium
   ============================================ */

:root {
    /* Background Colors - Pure urban dark */
    --color-bg-primary: #080808;
    --color-bg-secondary: #0F0F0F;
    --color-bg-tertiary: #161616;
    --color-bg-elevated: #1E1E1E;
    --color-bg-card: rgba(255,255,255,0.03);

    /* Brand Colors - Cyan + Purple */
    --color-cyan: #00E5FF;
    --color-blue: #2979FF;
    --color-purple: #AA00FF;
    --color-pink: #FF00E5;

    /* Urban Accent - Warm */
    --color-warm: #FF6B00;
    --color-warm-dim: rgba(255, 107, 0, 0.15);

    /* Text Colors */
    --color-text-primary: #F5F5F5;
    --color-text-secondary: #999999;
    --color-text-muted: #555555;
    --color-text-bright: #FFFFFF;

    /* Glass Effect */
    --color-glass-bg: rgba(255, 255, 255, 0.03);
    --color-glass-border: rgba(255, 255, 255, 0.07);
    --color-glass-bg-hover: rgba(255, 255, 255, 0.06);
    --color-glass-border-hover: rgba(255, 255, 255, 0.12);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #00E5FF, #AA00FF);
    --gradient-brand-reverse: linear-gradient(135deg, #AA00FF, #00E5FF);
    --gradient-urban: linear-gradient(135deg, #FF6B00, #AA00FF);
    --gradient-text: linear-gradient(135deg, #00E5FF 0%, #AA00FF 100%);
    --gradient-dark-overlay: linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.7) 50%, rgba(8,8,8,1) 100%);
    --gradient-card-overlay: linear-gradient(180deg, transparent 30%, rgba(8,8,8,0.95) 100%);

    /* Glow Effects */
    --glow-cyan: 0 0 15px rgba(0,229,255,0.35), 0 0 40px rgba(0,229,255,0.12);
    --glow-purple: 0 0 15px rgba(170,0,255,0.35), 0 0 40px rgba(170,0,255,0.12);
    --glow-brand: 0 0 20px rgba(0,229,255,0.2), 0 0 40px rgba(170,0,255,0.1);
    --glow-warm: 0 0 15px rgba(255,107,0,0.3), 0 0 40px rgba(255,107,0,0.1);
    --text-glow-cyan: 0 0 8px rgba(0,229,255,0.5), 0 0 25px rgba(0,229,255,0.2);
    --text-glow-purple: 0 0 8px rgba(170,0,255,0.5), 0 0 25px rgba(170,0,255,0.2);

    /* Typography - Urban aggressive */
    --font-heading: 'Barlow Condensed', 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Barlow Condensed', 'Orbitron', sans-serif;
    --font-display: 'Barlow Condensed', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;
    --text-5xl: 4rem;
    --text-6xl: 5.5rem;
    --text-hero: clamp(3.5rem, 12vw, 8rem);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Border Radius - More angular for urban */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 450ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 550ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 600;
    --z-nav: 900;
    --z-player: 950;
    --z-toast: 1000;

    /* Layout */
    --container-max: 1280px;
    --container-padding: 1.5rem;
    --nav-height: 72px;
    --player-height: 72px;
    --player-height-mobile: 64px;
}