/**
 * ============================================
 * RESPINNERSTV - NEO CYBERPUNK THEME
 * ============================================
 * Ultra-modern gambling aesthetic
 * ============================================
 */

:root {
    /* ==========================================
       🎰 NEO CYBERPUNK COLORS
       ========================================== */
    
    /* Neon Primary - Electric Cyan */
    --neon-cyan: #00f5ff;
    --neon-cyan-rgb: 0, 245, 255;
    --neon-cyan-dark: #00c4cc;
    
    /* Neon Secondary - Hot Magenta */
    --neon-magenta: #ff00ff;
    --neon-magenta-rgb: 255, 0, 255;
    --neon-pink: #ff2d95;
    --neon-pink-rgb: 255, 45, 149;
    
    /* Neon Accent - Electric Purple */
    --neon-purple: #a855f7;
    --neon-purple-rgb: 168, 85, 247;
    --neon-violet: #8b5cf6;
    
    /* Accent Colors - Keep cyan/purple as primary theme */
    --neon-accent: #a855f7;
    --neon-accent-rgb: 168, 85, 247;
    --neon-orange: #7c3aed;
    --neon-orange-rgb: 124, 58, 237;

    /* Warning/CTA Orange */
    --neon-orange-bright: #ff6b35;
    --neon-orange-bright-rgb: 255, 107, 53;
    --neon-orange-dark: #e5450b;

    /* Success/Live */
    --neon-green: #00ff88;
    --neon-green-rgb: 0, 255, 136;
    --neon-lime: #39ff14;
    --neon-success: #4ade80;
    --neon-success-rgb: 74, 222, 128;

    /* Danger/Hot */
    --neon-red: #ff073a;
    --neon-red-rgb: 255, 7, 58;
    --neon-red-bright: #ff3333;
    --neon-red-dark: #cc0000;
    
    /* Legacy mappings */
    --color-primary: var(--neon-cyan);
    --color-primary-rgb: var(--neon-cyan-rgb);
    --color-secondary: var(--neon-magenta);
    --color-secondary-rgb: var(--neon-magenta-rgb);
    --color-accent: var(--neon-accent);
    --color-accent-rgb: var(--neon-accent-rgb);
    --color-success: var(--neon-green);
    --color-danger: var(--neon-red);
    
    --primary: var(--neon-cyan);
    --secondary: var(--neon-magenta);
    --accent: var(--neon-accent);
    --success: var(--neon-green);
    --danger: var(--neon-red);
    
    /* Twitch/Platform Colors */
    --twitch-purple: #9147ff;
    --discord-blue: #5865f2;
    --youtube-red: #ff0000;
    
    /* Respinners Theme - Purple/Cyan */
    --respinners-primary: #9147ff;
    --respinners-secondary: #00f5ff;
    --respinners-gradient: linear-gradient(135deg, #9147ff 0%, #00f5ff 100%);
    
    /* ==========================================
       🌑 DARK BACKGROUNDS
       ========================================== */
    --bg-void: #000000;
    --bg-abyss: #050508;
    --bg-dark: #0a0a0f;
    --bg-darker: #08080c;
    --bg-darkest: #060510;
    --bg-surface: #0f0f15;
    --bg-elevated: #141420;
    --bg-card: rgba(15, 15, 25, 0.8);
    --bg-card-hover: rgba(25, 25, 40, 0.9);
    --bg-card-alt: rgba(20, 20, 35, 0.7);
    --bg-glass: rgba(10, 10, 18, 0.7);
    --bg-glass-strong: rgba(8, 8, 14, 0.85);
    --bg-glass-light: rgba(15, 15, 25, 0.5);
    --bg-overlay: rgba(5, 5, 10, 0.8);
    
    --bg: var(--bg-dark);
    --card-bg: var(--bg-card);
    
    /* ==========================================
       💠 GLASSMORPHISM CYBERPUNK
       ========================================== */
    --glass-blur: blur(20px);
    --glass-blur-strong: blur(40px);
    --glass-card: rgba(12, 12, 20, 0.6);
    --glass-card-hover: rgba(20, 20, 35, 0.7);
    --glass-border: rgba(0, 245, 255, 0.15);
    --glass-border-hover: rgba(0, 245, 255, 0.4);
    --glass-border-glow: rgba(0, 245, 255, 0.6);
    
    /* ==========================================
       ⚡ NEON GLOWS - SUBTLE VERSION
       ========================================== */
    --glow-cyan: 0 0 10px rgba(0, 245, 255, 0.3), 0 0 20px rgba(0, 245, 255, 0.15);
    --glow-cyan-strong: 0 0 15px rgba(0, 245, 255, 0.4), 0 0 30px rgba(0, 245, 255, 0.2);
    --glow-cyan-text: 0 0 8px rgba(0, 245, 255, 0.5);
    
    --glow-magenta: 0 0 10px rgba(255, 0, 255, 0.25), 0 0 20px rgba(255, 0, 255, 0.1);
    --glow-magenta-strong: 0 0 15px rgba(255, 0, 255, 0.35), 0 0 30px rgba(255, 0, 255, 0.15);
    
    --glow-pink: 0 0 10px rgba(255, 45, 149, 0.3), 0 0 20px rgba(255, 45, 149, 0.15);
    
    --glow-gold: 0 0 10px rgba(145, 71, 255, 0.3), 0 0 20px rgba(145, 71, 255, 0.15);
    --glow-gold-strong: 0 0 15px rgba(145, 71, 255, 0.4), 0 0 30px rgba(145, 71, 255, 0.2);
    --glow-respinners: 0 0 15px rgba(145, 71, 255, 0.4), 0 0 30px rgba(0, 245, 255, 0.2);
    
    --glow-purple: 0 0 10px rgba(168, 85, 247, 0.3), 0 0 20px rgba(168, 85, 247, 0.15);
    
    --glow-green: 0 0 10px rgba(0, 255, 136, 0.3), 0 0 20px rgba(0, 255, 136, 0.15);
    --glow-success: 0 0 10px rgba(74, 222, 128, 0.3), 0 0 20px rgba(74, 222, 128, 0.15);
    --glow-orange: 0 0 10px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 107, 53, 0.15);
    --glow-red: 0 0 10px rgba(255, 7, 58, 0.3), 0 0 20px rgba(255, 7, 58, 0.15);

    /* Legacy */
    --glow-primary: var(--glow-cyan);
    --glow-primary-strong: var(--glow-cyan-strong);
    --glow-secondary: var(--glow-magenta);
    --glow-secondary-strong: var(--glow-magenta-strong);
    
    /* ==========================================
       🎨 GRADIENTS
       ========================================== */
    --gradient-cyber: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-magenta) 100%);
    --gradient-cyber-reverse: linear-gradient(135deg, var(--neon-magenta) 0%, var(--neon-cyan) 100%);
    --gradient-cyber-vertical: linear-gradient(180deg, var(--neon-cyan) 0%, var(--neon-magenta) 100%);
    
    --gradient-neon-pink: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-magenta) 100%);
    --gradient-neon-accent: linear-gradient(135deg, #9147ff 0%, #00f5ff 100%);
    --gradient-neon-purple: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-violet) 100%);
    --gradient-respinners: linear-gradient(135deg, #9147ff 0%, #00f5ff 100%);
    --gradient-respinners-hover: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
    
    --gradient-success: linear-gradient(135deg, #00cc44, #00aa33);
    --gradient-danger: linear-gradient(135deg, var(--neon-red-bright), var(--neon-red-dark));
    --gradient-warning: linear-gradient(135deg, var(--neon-orange-bright), var(--neon-orange-dark));
    --gradient-twitch: linear-gradient(135deg, var(--twitch-purple), #6a2cc0);

    --gradient-dark: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-void) 100%);
    --gradient-dark-reverse: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-dark) 100%);
    --gradient-dark-radial: radial-gradient(ellipse at center, var(--bg-surface) 0%, var(--bg-void) 70%);
    
    --gradient-glass: linear-gradient(145deg, rgba(20, 20, 35, 0.6) 0%, rgba(10, 10, 18, 0.4) 100%);
    --gradient-glass-border: linear-gradient(135deg, rgba(0, 245, 255, 0.3), rgba(255, 0, 255, 0.3));
    --gradient-glass-hover: linear-gradient(145deg, rgba(30, 30, 50, 0.7) 0%, rgba(15, 15, 28, 0.5) 100%);
    
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    --gradient-card-cyber: linear-gradient(145deg, rgba(0, 245, 255, 0.08) 0%, rgba(255, 0, 255, 0.05) 100%);
    
    /* Legacy */
    --gradient-primary: var(--gradient-cyber);
    --gradient-primary-reverse: var(--gradient-cyber-reverse);
    --gradient-gold: var(--gradient-neon-accent);
    --gradient-gold-vertical: linear-gradient(180deg, var(--neon-accent), var(--neon-orange));
    --gradient-red: linear-gradient(135deg, #ff0000, #ff4444);
    
    /* ==========================================
       📝 TEXT
       ========================================== */
    --text-primary: #ffffff;
    --text-secondary: #b8b8c8;
    --text-muted: #6a6a7a;
    --text-dark: #000000;
    --text-neon: var(--neon-cyan);
    
    --text: #ffffff;
    
    /* ==========================================
       📐 BORDERS
       ========================================== */
    --border: rgba(0, 245, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-glow: rgba(0, 245, 255, 0.4);
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    --border-radius-sm: 8px;
    --border-radius-xs: 4px;
    --border-radius-full: 9999px;
    
    /* ==========================================
       🔤 FONTS - MONTSERRAT PRIMARY
       ========================================== */
    --font-display: 'Montserrat', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Exo 2', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    --font-size-6xl: 4.5rem;
    --font-size-7xl: 6rem;
    
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;
    
    /* ==========================================
       📏 SPACING & SIZING
       ========================================== */
    --container-width: 1400px;
    --container-narrow: 1000px;
    --container-wide: 1600px;
    
    --nav-height: 80px;
    --nav-height-scrolled: 70px;
    --nav-height-mobile: 70px;
    
    --section-padding: 120px;
    --section-padding-tablet: 80px;
    --section-padding-mobile: 60px;
    
    /* ==========================================
       ⏱️ TRANSITIONS
       ========================================== */
    --transition-ultra: 0.1s ease;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s ease;
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ==========================================
       📚 Z-INDEX
       ========================================== */
    --z-behind: -1;
    --z-particles: -1;
    --z-floating: 50;
    --z-normal: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-nav-backdrop: 998;
    --z-nav-menu: 999;
    --z-navbar: 1000;
    --z-nav-dropdown: 1100;
    --z-overlay: 2000;
    --z-toast: 3000;
    --z-cookie: 4000;
    --z-age-gate: 99999;
    
    /* ==========================================
       📐 SPACING SCALE
       ========================================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* ==========================================
       🔲 SHADOWS - SUBTLE VERSION
       ========================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-neon: 0 0 10px rgba(0, 245, 255, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3);

    /* ==========================================
       🔧 REUSABLE ALPHA OVERLAYS
       ========================================== */
    /* Purple alpha scale (twitch-purple #9147ff = 145,71,255) */
    --alpha-purple-4: rgba(145, 71, 255, 0.04);
    --alpha-purple-6: rgba(145, 71, 255, 0.06);
    --alpha-purple-8: rgba(145, 71, 255, 0.08);
    --alpha-purple-10: rgba(145, 71, 255, 0.1);
    --alpha-purple-12: rgba(145, 71, 255, 0.12);
    --alpha-purple-15: rgba(145, 71, 255, 0.15);
    --alpha-purple-20: rgba(145, 71, 255, 0.2);
    --alpha-purple-25: rgba(145, 71, 255, 0.25);
    --alpha-purple-30: rgba(145, 71, 255, 0.3);
    --alpha-purple-35: rgba(145, 71, 255, 0.35);
    --alpha-purple-40: rgba(145, 71, 255, 0.4);
    --alpha-purple-50: rgba(145, 71, 255, 0.5);
    --alpha-purple-60: rgba(145, 71, 255, 0.6);

    /* Cyan alpha scale (#00f5ff = 0,245,255) */
    --alpha-cyan-5: rgba(0, 245, 255, 0.05);
    --alpha-cyan-8: rgba(0, 245, 255, 0.08);
    --alpha-cyan-10: rgba(0, 245, 255, 0.1);
    --alpha-cyan-15: rgba(0, 245, 255, 0.15);
    --alpha-cyan-20: rgba(0, 245, 255, 0.2);
    --alpha-cyan-25: rgba(0, 245, 255, 0.25);
    --alpha-cyan-30: rgba(0, 245, 255, 0.3);
    --alpha-cyan-40: rgba(0, 245, 255, 0.4);
    --alpha-cyan-50: rgba(0, 245, 255, 0.5);

    /* White alpha scale */
    --alpha-white-2: rgba(255, 255, 255, 0.02);
    --alpha-white-3: rgba(255, 255, 255, 0.03);
    --alpha-white-4: rgba(255, 255, 255, 0.04);
    --alpha-white-5: rgba(255, 255, 255, 0.05);
    --alpha-white-6: rgba(255, 255, 255, 0.06);
    --alpha-white-8: rgba(255, 255, 255, 0.08);
    --alpha-white-10: rgba(255, 255, 255, 0.1);
    --alpha-white-15: rgba(255, 255, 255, 0.15);
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-white-25: rgba(255, 255, 255, 0.25);
    --alpha-white-30: rgba(255, 255, 255, 0.3);
    --alpha-white-35: rgba(255, 255, 255, 0.35);
    --alpha-white-40: rgba(255, 255, 255, 0.4);
    --alpha-white-45: rgba(255, 255, 255, 0.45);
    --alpha-white-50: rgba(255, 255, 255, 0.5);
    --alpha-white-55: rgba(255, 255, 255, 0.55);
    --alpha-white-60: rgba(255, 255, 255, 0.6);
    --alpha-white-70: rgba(255, 255, 255, 0.7);
    --alpha-white-85: rgba(255, 255, 255, 0.85);

    /* Black alpha scale */
    --alpha-black-20: rgba(0, 0, 0, 0.2);
    --alpha-black-30: rgba(0, 0, 0, 0.3);
    --alpha-black-40: rgba(0, 0, 0, 0.4);
    --alpha-black-50: rgba(0, 0, 0, 0.5);
    --alpha-black-60: rgba(0, 0, 0, 0.6);
    --alpha-black-70: rgba(0, 0, 0, 0.7);
    --alpha-black-80: rgba(0, 0, 0, 0.8);
    --alpha-black-90: rgba(0, 0, 0, 0.9);
}