/* =============================================
   THEME: Dark Green (Default)
   ============================================= */

:root {
    /* === Primary Colors === */
    --primary-accent: #27ae60;
    --primary-accent-dark: #1e8449;
    --primary-accent-light: #2ecc71;
    --primary-accent-alpha: rgba(39, 174, 96, 0.3);
    
    /* === Background Colors === */
    --bg-dark: #0d1117;
    --bg-card: #1a1f2e;
    --bg-elevated: #242b3d;
    --bg-input: #2c3548;
    
    /* === Border Colors === */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    
    /* === Text Colors === */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    
    /* === Border Radius === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* === Component Specific === */
    --navbar-bg: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    --navbar-text: var(--text-secondary);
    --navbar-text-hover: var(--text-primary);
    --navbar-toggler-icon: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    
    --hover-bg: rgba(39, 174, 96, 0.15);
    --card-bg: rgba(26, 31, 46, 0.8);
    --card-header-bg: linear-gradient(90deg, rgba(39, 174, 96, 0.15) 0%, rgba(39, 174, 96, 0.05) 100%);
    
    --progress-bar-bg: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-dark) 100%);
    --slider-track-bg: rgba(255, 255, 255, 0.15);
    
    --player-header-bg: linear-gradient(90deg, rgba(39, 174, 96, 0.25) 0%, rgba(39, 174, 96, 0.05) 100%);
    
    /* === Button Styles === */
    --btn-primary-bg: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-accent-dark) 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, #2ecc71 0%, var(--primary-accent) 100%);
    --btn-primary-text: #ffffff;
    --btn-success-text: #ffffff;
    
    /* === Icon Backgrounds === */
    --icon-bg: rgba(255, 255, 255, 0.1);
    --icon-bg-hover: rgba(255, 255, 255, 0.2);
    
    /* === Accent Glows === */
    --accent-glow: 0 4px 12px rgba(39, 174, 96, 0.3);
    --accent-glow-weak: 0 3px 10px rgba(39, 174, 96, 0.2);
    --accent-glow-strong: 0 6px 25px rgba(39, 174, 96, 0.5);
    
    /* === Form Elements === */
    --input-focus-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgba(255,255,255,0.7)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    
    /* === Status Colors === */
    --danger: #e74c3c;
    --danger-dark: #c0392b;
    --danger-alpha: rgba(231, 76, 60, 0.4);
    --success: #27ae60;
    --success-dark: #1e8449;
    
    /* === Alert Colors === */
    --alert-danger-border: rgba(231, 76, 60, 0.5);
    --alert-danger-bg: rgba(231, 76, 60, 0.15);
    --alert-danger-text: #ff6b6b;
    --alert-success-border: rgba(39, 174, 96, 0.5);
    --alert-success-bg: rgba(39, 174, 96, 0.15);
    --alert-success-text: #6deca9;
    --alert-vote-bg: rgba(26, 31, 46, 0.9);
    --alert-cookie-bg: rgba(26, 31, 46, 0.95);
    
    /* === User Class Colors === */
    --class-0: #f1c40f;
    --class-1: #e74c3c;
    --class-2: #3498db;
    --class-3: #27ae60;
    --class-4: #9b59b6;
    --class-5: #e91e63;
    --class-6: #ff9800;
    --class-7: #1abc9c;
    --class-8: #7c4dff;
    --class-9: #5dade2;
    --class-10: #00bcd4;
    --class-11: #ff7043;
    --class-12: #8bc34a;
    
    /* === User Class Glows === */
    --class-glow-0: 0 0 10px rgba(241, 196, 15, 0.3);
    --class-glow-1: 0 0 10px rgba(231, 76, 60, 0.3);
    --class-glow-2: 0 0 10px rgba(52, 152, 219, 0.3);
    --class-glow-3: 0 0 10px rgba(39, 174, 96, 0.3);
    --class-glow-4: 0 0 10px rgba(155, 89, 182, 0.3);
    --class-glow-5: 0 0 10px rgba(233, 30, 99, 0.3);
    --class-glow-6: 0 0 10px rgba(255, 152, 0, 0.3);
    --class-glow-7: 0 0 10px rgba(26, 188, 156, 0.3);
    --class-glow-8: 0 0 10px rgba(124, 77, 255, 0.3);
    --class-glow-9: 0 0 10px rgba(93, 173, 226, 0.3);
    --class-glow-10: 0 0 10px rgba(0, 188, 212, 0.3);
    --class-glow-11: 0 0 10px rgba(255, 112, 67, 0.3);
    --class-glow-12: 0 0 10px rgba(139, 195, 74, 0.3);
}