/* ========================================
   🎨 Parisan Gamer - Cyber Gaming Theme
   ======================================== */

:root {
    /* ========== PRIMARY COLORS ========== */
    --primary-color: #FF6B35;
    --primary-dark: #E85A28;
    --primary-light: #FF8C61;
    --primary-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8C61 100%);
    
    /* ========== SECONDARY COLORS ========== */
    --secondary-color: #004E89;
    --secondary-dark: #003D6B;
    --secondary-light: #0066B3;
    
    /* ========== ACCENT COLORS ========== */
    --accent-color: #F7B801;
    --accent-dark: #D99F00;
    --accent-light: #FFD60A;
    
    /* ========== STATUS COLORS ========== */
    --success-color: #00D9A3;
    --success-light: #5FFFD7;
    --success-dark: #00B386;
    
    --warning-color: #FFB800;
    --warning-light: #FFE5A0;
    --warning-dark: #E6A500;
    
    --error-color: #FF4757;
    --error-light: #FFE5E8;
    --error-dark: #E63946;
    
    --info-color: #00D9FF;
    --info-light: #A0F0FF;
    --info-dark: #00B8D9;
    
    /* ========== GAME SPECIFIC ========== */
    --game-table-green: #00B386;
    --game-table-dark: #009973;
    --card-red: #FF4757;
    --card-black: #1A1D29;
    --gold: #FFD60A;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    
    /* ========== GRADIENTS ========== */
    --gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FF8C61 100%);
    --gradient-secondary: linear-gradient(135deg, #004E89 0%, #0066B3 100%);
    --gradient-accent: linear-gradient(135deg, #F7B801 0%, #FFD60A 100%);
    --gradient-success: linear-gradient(135deg, #00D9A3 0%, #5FFFD7 100%);
    --gradient-dark: linear-gradient(135deg, #1A1D29 0%, #2D3142 100%);
    --gradient-game: linear-gradient(135deg, #FF6B35 0%, #004E89 100%);
    --gradient-cyber: linear-gradient(135deg, #00D9FF 0%, #FF6B35 50%, #FFD60A 100%);
    --gradient-neon: linear-gradient(135deg, #00D9FF 0%, #FF6B35 100%);
    
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.24);
    
    --shadow-primary: 0 8px 32px rgba(255, 107, 53, 0.4);
    --shadow-secondary: 0 8px 32px rgba(0, 78, 137, 0.4);
    --shadow-success: 0 8px 32px rgba(0, 217, 163, 0.4);
    --shadow-neon: 0 0 20px rgba(0, 217, 255, 0.6);
    
    /* ========== SPACING ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== TYPOGRAPHY ========== */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-gaming: 'Arial Black', 'Arial Bold', sans-serif;
    
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    
    /* ========== Z-INDEX ========== */
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
    --z-notification: 4000;
}

/* ========================================
   🌞 LIGHT THEME (Default)
   ======================================== */
:root, [data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F1F3F5;
    --bg-hover: #E9ECEF;
    
    --text-color: #1A1D29;
    --text-secondary: #495057;
    --text-muted: #6C757D;
    --text-light: #ADB5BD;
    
    --card-bg: #FFFFFF;
    --border-color: #E0E0E0;
    
    --overlay-bg: rgba(0, 0, 0, 0.6);
    
    /* Light mode specific shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Glow effects for light mode */
    --glow-primary: 0 0 30px rgba(255, 107, 53, 0.4);
    --glow-secondary: 0 0 30px rgba(0, 78, 137, 0.4);
    --glow-accent: 0 0 30px rgba(247, 184, 1, 0.4);
}

/* ========================================
   🌙 DARK THEME
   ======================================== */
[data-theme="dark"] {
    --bg-primary: #0A0E27;
    --bg-secondary: #1A1D29;
    --bg-tertiary: #2D3142;
    --bg-hover: #3A3F5C;
    
    --text-color: #F8F9FA;
    --text-secondary: #CED4DA;
    --text-muted: #ADB5BD;
    --text-light: #6C757D;
    
    --card-bg: #1A1D29;
    --border-color: #3A3F5C;
    
    --overlay-bg: rgba(10, 14, 39, 0.8);
    
    /* Dark mode specific shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    
    /* Neon glow effects for dark mode */
    --glow-primary: 0 0 20px rgba(255, 107, 53, 0.5);
    --glow-secondary: 0 0 20px rgba(0, 217, 255, 0.5);
    --glow-accent: 0 0 20px rgba(255, 214, 10, 0.5);
}

/* ========================================
   🎯 UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-primary { background: var(--primary-color) !important; }
.bg-secondary { background: var(--secondary-color) !important; }
.bg-accent { background: var(--accent-color) !important; }
.bg-success { background: var(--success-color) !important; }
.bg-warning { background: var(--warning-color) !important; }
.bg-error { background: var(--error-color) !important; }

/* Text Colors */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }

/* Gradients */
.gradient-primary { background: var(--gradient-primary) !important; }
.gradient-secondary { background: var(--gradient-secondary) !important; }
.gradient-accent { background: var(--gradient-accent) !important; }
.gradient-game { background: var(--gradient-game) !important; }
.gradient-cyber { background: var(--gradient-cyber) !important; }
.gradient-neon { background: var(--gradient-neon) !important; }

/* Glow Effects (Dark Mode) */
[data-theme="dark"] .glow-primary {
    box-shadow: var(--glow-primary);
}

[data-theme="dark"] .glow-secondary {
    box-shadow: var(--glow-secondary);
}

[data-theme="dark"] .glow-accent {
    box-shadow: var(--glow-accent);
}

/* Neon Text Effect (Dark Mode) */
[data-theme="dark"] .neon-text {
    text-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
}

/* Glass Morphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .glass {
    background: rgba(26, 29, 41, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cyber Border Effect */
.cyber-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                var(--gradient-cyber) border-box;
}

/* Animated Gradient Background */
.animated-gradient {
    background: var(--gradient-cyber);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}