/* =============================================
   THEME: Teal / Cyan
   ============================================= */

:root {
    /* === Primary Colors === */
    --primary-accent: #00d4aa;
    --primary-accent-dark: #00a88a;
    --primary-accent-light: #5fffda;
    --primary-accent-alpha: rgba(0, 212, 170, 0.3);
    
    /* === Background Colors === */
    --bg-dark: #001a1c;
    --bg-card: #003537;
    --bg-elevated: #004547;
    --bg-input: #002223;
    
    /* === Border Colors === */
    --border-subtle: rgba(0, 212, 170, 0.12);
    --border-medium: rgba(0, 212, 170, 0.2);
    
    /* === Text Colors === */
    --text-primary: #c0fdff;
    --text-secondary: rgba(192, 253, 255, 0.75);
    --text-muted: rgba(192, 253, 255, 0.5);
    
    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    
    /* === 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(192,253,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    
    --hover-bg: rgba(0, 212, 170, 0.15);
    --card-bg: rgba(0, 53, 55, 0.8);
    --card-header-bg: linear-gradient(90deg, rgba(0, 212, 170, 0.2) 0%, rgba(0, 212, 170, 0.05) 100%);
    
    --progress-bar-bg: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-dark) 100%);
    --slider-track-bg: rgba(192, 253, 255, 0.15);
    
    --player-header-bg: linear-gradient(90deg, rgba(0, 212, 170, 0.25) 0%, rgba(0, 212, 170, 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, #00e8bb 0%, var(--primary-accent) 100%);
    --btn-primary-text: var(--bg-dark);
    --btn-success-text: var(--bg-dark);
    
    /* === Icon Backgrounds === */
    --icon-bg: rgba(192, 253, 255, 0.1);
    --icon-bg-hover: rgba(192, 253, 255, 0.2);
    
    /* === Accent Glows === */
    --accent-glow: 0 4px 12px rgba(0, 212, 170, 0.3);
    --accent-glow-weak: 0 3px 10px rgba(0, 212, 170, 0.2);
    --accent-glow-strong: 0 6px 25px rgba(0, 212, 170, 0.5);
    
    /* === Form Elements === */
    --input-focus-shadow: 0 0 0 3px rgba(0, 212, 170, 0.2);
    --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(192,253,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: #00d4aa;
    --success-dark: #00a88a;
    
    /* === Alert Colors === */
    --alert-danger-border: rgba(231, 76, 60, 0.5);
    --alert-danger-bg: rgba(231, 76, 60, 0.15);
    --alert-danger-text: #ff8080;
    --alert-success-border: rgba(0, 212, 170, 0.5);
    --alert-success-bg: rgba(0, 212, 170, 0.15);
    --alert-success-text: #7fffdb;
    --alert-vote-bg: rgba(0, 53, 55, 0.9);
    --alert-cookie-bg: rgba(0, 26, 28, 0.95);
    
    /* === User Class Colors === */
    --class-0: #ccd9a6;
    --class-1: #f3b5a0;
    --class-2: #ff9f33;
    --class-3: #f0b800;
    --class-4: #8cd960;
    --class-5: #00ff88;
    --class-6: #e88be0;
    --class-7: #7070ff;
    --class-8: #ff8bc4;
    --class-9: #51fbff;
    --class-10: #ffee55;
    --class-11: #ff5555;
    --class-12: #4da6ff;
    
    /* === User Class Glows === */
    --class-glow-0: 0 0 10px rgba(204, 217, 166, 0.3);
    --class-glow-1: 0 0 10px rgba(243, 181, 160, 0.3);
    --class-glow-2: 0 0 10px rgba(255, 159, 51, 0.3);
    --class-glow-3: 0 0 10px rgba(240, 184, 0, 0.3);
    --class-glow-4: 0 0 10px rgba(140, 217, 96, 0.3);
    --class-glow-5: 0 0 10px rgba(0, 255, 136, 0.4);
    --class-glow-6: 0 0 10px rgba(232, 139, 224, 0.3);
    --class-glow-7: 0 0 10px rgba(112, 112, 255, 0.3);
    --class-glow-8: 0 0 10px rgba(255, 139, 196, 0.3);
    --class-glow-9: 0 0 12px rgba(81, 251, 255, 0.4);
    --class-glow-10: 0 0 10px rgba(255, 238, 85, 0.4);
    --class-glow-11: 0 0 10px rgba(255, 85, 85, 0.4);
    --class-glow-12: 0 0 10px rgba(77, 166, 255, 0.3);
}