/**
 * Bell Deb - Système de thèmes multiples
 * 3 thèmes disponibles : purple (violet), light (clair), dark (sombre)
 */

/* ============================================
   THÈME VIOLET (DEFAULT)
   Style actuel du site avec gradients violets
   ============================================ */
:root,
[data-theme="purple"] {
    /* Couleurs de fond */
    --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-primary-solid: #667eea;
    --bg-card: rgba(255, 255, 255, 0.1);
    --bg-card-hover: rgba(255, 255, 255, 0.15);
    --bg-input: rgba(255, 255, 255, 0.1);
    --bg-input-focus: rgba(255, 255, 255, 0.15);
    --bg-overlay: rgba(0, 0, 0, 0.2);
    --bg-overlay-dark: rgba(0, 0, 0, 0.3);

    /* Texte */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.8);
    --text-light: rgba(255, 255, 255, 0.7);
    --text-placeholder: rgba(255, 255, 255, 0.5);
    --text-gradient: linear-gradient(45deg, #ffffff, #e0e7ff);

    /* Bordures */
    --border-primary: rgba(255, 255, 255, 0.2);
    --border-hover: rgba(255, 255, 255, 0.4);
    --border-light: rgba(255, 255, 255, 0.1);

    /* Ombres */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);

    /* Boutons primaires (gris foncé) */
    --btn-primary-bg: linear-gradient(45deg, #4a5568, #2d3748);
    --btn-primary-hover: linear-gradient(45deg, #2d3748, #1a202c);
    --btn-primary-shadow: 0 10px 30px rgba(74, 85, 104, 0.3);
    --btn-primary-hover-shadow: 0 15px 40px rgba(74, 85, 104, 0.4);

    /* Boutons login (vert) */
    --btn-login-bg: linear-gradient(45deg, #16a34a, #15803d);
    --btn-login-hover: linear-gradient(45deg, #22c55e, #16a34a);
    --btn-login-border: rgba(34, 197, 94, 0.5);
    --btn-login-shadow: 0 15px 40px rgba(34, 197, 94, 0.4);

    /* Boutons register (bleu) */
    --btn-register-bg: linear-gradient(45deg, #3b82f6, #2563eb);
    --btn-register-hover: linear-gradient(45deg, #60a5fa, #3b82f6);
    --btn-register-border: rgba(59, 130, 246, 0.5);
    --btn-register-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);

    /* Boutons extensions (vert émeraude) */
    --btn-extension-bg: linear-gradient(45deg, #10b981, #059669);
    --btn-extension-border: rgba(16, 185, 129, 0.5);

    /* Boutons premium (violet) */
    --btn-premium-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-premium-hover: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);

    /* Accent colors */
    --accent-purple: #8b5cf6;
    --accent-gold: #ffd700;
    --accent-green: #22c55e;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;

    /* Status colors */
    --status-premium-bg: rgba(255, 215, 0, 0.15);
    --status-premium-border: rgba(255, 215, 0, 0.3);
    --status-premium-icon: #ffd700;

    --status-free-bg: rgba(59, 130, 246, 0.15);
    --status-free-border: rgba(59, 130, 246, 0.3);
    --status-free-icon: #3b82f6;

    --status-guest-bg: rgba(168, 85, 247, 0.15);
    --status-guest-border: rgba(168, 85, 247, 0.3);
    --status-guest-icon: #a855f7;

    /* Messages */
    --msg-error-bg: rgba(239, 68, 68, 0.15);
    --msg-error-border: rgba(239, 68, 68, 0.3);
    --msg-error-color: #ef4444;

    --msg-success-bg: rgba(34, 197, 94, 0.15);
    --msg-success-border: rgba(34, 197, 94, 0.3);
    --msg-success-color: #22c55e;

    --msg-info-bg: rgba(59, 130, 246, 0.15);
    --msg-info-border: rgba(59, 130, 246, 0.3);
    --msg-info-color: #3b82f6;

    --msg-warning-bg: rgba(245, 158, 11, 0.15);
    --msg-warning-border: rgba(245, 158, 11, 0.3);
    --msg-warning-color: #f59e0b;

    /* Backdrop filter */
    --blur-sm: blur(10px);
    --blur-md: blur(20px);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   THÈME CLAIR (LIGHT)
   Inspiration Mailjet - Fond clair et aéré MAIS LISIBLE
   ============================================ */
[data-theme="light"] {
    /* Couleurs de fond */
    --bg-primary: #F8F9FB;
    --bg-primary-solid: #F8F9FB;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f1f4;
    --bg-input: #ffffff;
    --bg-input-focus: #f9fafb;
    --bg-overlay: rgba(0, 0, 0, 0.15);
    --bg-overlay-dark: rgba(0, 0, 0, 0.25);

    /* Texte */
    --text-primary: #111827;
    --text-secondary: #1f2937;
    --text-muted: #4b5563;
    --text-light: #6b7280;
    --text-placeholder: #9ca3af;
    --text-gradient: linear-gradient(45deg, #111827, #374151);

    /* Bordures */
    --border-primary: #d1d5db;
    --border-hover: #9ca3af;
    --border-light: #e5e7eb;

    /* Ombres (douces et légères) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 15px rgba(182, 167, 248, 0.3);

    /* Boutons primaires (violet clair désaturé) */
    --btn-primary-bg: linear-gradient(45deg, #B6A7F8, #9b87f5);
    --btn-primary-hover: linear-gradient(45deg, #a894f7, #8b72f3);
    --btn-primary-shadow: 0 4px 12px rgba(182, 167, 248, 0.3);
    --btn-primary-hover-shadow: 0 6px 16px rgba(182, 167, 248, 0.4);

    /* Boutons login (vert clair) */
    --btn-login-bg: linear-gradient(45deg, #10b981, #059669);
    --btn-login-hover: linear-gradient(45deg, #34d399, #10b981);
    --btn-login-border: rgba(16, 185, 129, 0.4);
    --btn-login-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

    /* Boutons register (bleu clair) */
    --btn-register-bg: linear-gradient(45deg, #3b82f6, #2563eb);
    --btn-register-hover: linear-gradient(45deg, #60a5fa, #3b82f6);
    --btn-register-border: rgba(59, 130, 246, 0.4);
    --btn-register-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

    /* Boutons extensions */
    --btn-extension-bg: linear-gradient(45deg, #10b981, #059669);
    --btn-extension-border: rgba(16, 185, 129, 0.4);

    /* Boutons premium */
    --btn-premium-bg: linear-gradient(135deg, #B6A7F8 0%, #9b87f5 100%);
    --btn-premium-hover: linear-gradient(135deg, #a894f7 0%, #8b72f3 100%);

    /* Accent colors (versions claires) */
    --accent-purple: #B6A7F8;
    --accent-gold: #fbbf24;
    --accent-green: #10b981;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;

    /* Status colors */
    --status-premium-bg: rgba(251, 191, 36, 0.1);
    --status-premium-border: rgba(251, 191, 36, 0.3);
    --status-premium-icon: #fbbf24;

    --status-free-bg: rgba(59, 130, 246, 0.1);
    --status-free-border: rgba(59, 130, 246, 0.3);
    --status-free-icon: #3b82f6;

    --status-guest-bg: rgba(182, 167, 248, 0.1);
    --status-guest-border: rgba(182, 167, 248, 0.3);
    --status-guest-icon: #B6A7F8;

    /* Messages */
    --msg-error-bg: rgba(239, 68, 68, 0.1);
    --msg-error-border: rgba(239, 68, 68, 0.3);
    --msg-error-color: #dc2626;

    --msg-success-bg: rgba(16, 185, 129, 0.1);
    --msg-success-border: rgba(16, 185, 129, 0.3);
    --msg-success-color: #059669;

    --msg-info-bg: rgba(59, 130, 246, 0.1);
    --msg-info-border: rgba(59, 130, 246, 0.3);
    --msg-info-color: #2563eb;

    --msg-warning-bg: rgba(245, 158, 11, 0.1);
    --msg-warning-border: rgba(245, 158, 11, 0.3);
    --msg-warning-color: #d97706;

    /* Backdrop filter (moins prononcé) */
    --blur-sm: blur(8px);
    --blur-md: blur(12px);
}

/* ============================================
   THÈME SOMBRE (DARK)
   Inspiration Discord - Profondeur et contraste
   ============================================ */
[data-theme="dark"] {
    /* Couleurs de fond */
    --bg-primary: #2B2D31;
    --bg-primary-solid: #2B2D31;
    --bg-card: #36393F;
    --bg-card-hover: #3f4248;
    --bg-input: #1e1f22;
    --bg-input-focus: #292a2f;
    --bg-overlay: rgba(0, 0, 0, 0.3);
    --bg-overlay-dark: rgba(0, 0, 0, 0.5);

    /* Texte */
    --text-primary: #ECECEC;
    --text-secondary: #dbdee1;
    --text-muted: #b5bac1;
    --text-light: #949ba4;
    --text-placeholder: #6d7178;
    --text-gradient: linear-gradient(45deg, #ECECEC, #b5bac1);

    /* Bordures (contours légers) */
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.04);

    /* Ombres (internes et profondes) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(123, 110, 246, 0.3);

    /* Boutons primaires (violet atténué avec glow) */
    --btn-primary-bg: linear-gradient(45deg, #5865f2, #4752c4);
    --btn-primary-hover: linear-gradient(45deg, #7B6EF6, #5865f2);
    --btn-primary-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    --btn-primary-hover-shadow: 0 0 20px rgba(123, 110, 246, 0.5);

    /* Boutons login (vert Discord) */
    --btn-login-bg: linear-gradient(45deg, #248046, #1a6334);
    --btn-login-hover: linear-gradient(45deg, #2d9f59, #248046);
    --btn-login-border: rgba(36, 128, 70, 0.4);
    --btn-login-shadow: 0 0 15px rgba(36, 128, 70, 0.3);

    /* Boutons register (bleu Discord) */
    --btn-register-bg: linear-gradient(45deg, #5865f2, #4752c4);
    --btn-register-hover: linear-gradient(45deg, #7B6EF6, #5865f2);
    --btn-register-border: rgba(88, 101, 242, 0.4);
    --btn-register-shadow: 0 0 15px rgba(88, 101, 242, 0.3);

    /* Boutons extensions */
    --btn-extension-bg: linear-gradient(45deg, #248046, #1a6334);
    --btn-extension-border: rgba(36, 128, 70, 0.4);

    /* Boutons premium */
    --btn-premium-bg: linear-gradient(135deg, #7B6EF6 0%, #5865f2 100%);
    --btn-premium-hover: linear-gradient(135deg, #949bf4 0%, #7B6EF6 100%);

    /* Accent colors (versions sombres avec glow) */
    --accent-purple: #7B6EF6;
    --accent-gold: #f1c40f;
    --accent-green: #3ba55d;
    --accent-blue: #5865f2;
    --accent-red: #ed4245;
    --accent-orange: #f0b232;

    /* Status colors */
    --status-premium-bg: rgba(241, 196, 15, 0.1);
    --status-premium-border: rgba(241, 196, 15, 0.2);
    --status-premium-icon: #f1c40f;

    --status-free-bg: rgba(88, 101, 242, 0.1);
    --status-free-border: rgba(88, 101, 242, 0.2);
    --status-free-icon: #5865f2;

    --status-guest-bg: rgba(123, 110, 246, 0.1);
    --status-guest-border: rgba(123, 110, 246, 0.2);
    --status-guest-icon: #7B6EF6;

    /* Messages */
    --msg-error-bg: rgba(237, 66, 69, 0.1);
    --msg-error-border: rgba(237, 66, 69, 0.2);
    --msg-error-color: #ed4245;

    --msg-success-bg: rgba(59, 165, 93, 0.1);
    --msg-success-border: rgba(59, 165, 93, 0.2);
    --msg-success-color: #3ba55d;

    --msg-info-bg: rgba(88, 101, 242, 0.1);
    --msg-info-border: rgba(88, 101, 242, 0.2);
    --msg-info-color: #5865f2;

    --msg-warning-bg: rgba(240, 178, 50, 0.1);
    --msg-warning-border: rgba(240, 178, 50, 0.2);
    --msg-warning-color: #f0b232;

    /* Backdrop filter */
    --blur-sm: blur(10px);
    --blur-md: blur(20px);
}

/* ============================================
   THÈME ARC RAIDERS (ARC)
   Inspiration Arc Raiders - Retro-futuriste, Industriel, Orange International
   ============================================ */
/* ============================================
   THÈME ARC RAIDERS (ARC)
   Inspiration Arc Raiders - Cassette Futurism, Warm Retro-Tech
   Colors: Mustard Gold (#eca925), Off-White (#e3dbcb), Warm Dark (#1a1818)
   Fonts: Rajdhani (Headers), Barlow (Body), JetBrains Mono (Data)
   ============================================ */
[data-theme="arc"] {
    /* Couleurs de fond */
    --bg-primary: #1a1818;
    --bg-primary-solid: #1a1818;
    --bg-card: rgba(30, 28, 28, 0.8);
    --bg-card-hover: rgba(40, 38, 38, 0.9);
    --bg-input: rgba(20, 18, 18, 0.8);
    --bg-input-focus: rgba(30, 28, 28, 0.95);
    --bg-overlay: rgba(10, 8, 8, 0.85);
    --bg-overlay-dark: rgba(5, 4, 4, 0.95);

    /* Texte */
    --text-primary: #e3dbcb;
    /* Off-white/Beige */
    --text-secondary: #b0aaa0;
    --text-muted: #706a60;
    --text-light: #908a80;
    --text-placeholder: #504a40;
    --text-gradient: linear-gradient(45deg, #eca925, #ffcc00);

    /* Bordures (Tech/Sharp) */
    --border-primary: rgba(236, 169, 37, 0.3);
    /* Mustard Gold */
    --border-hover: rgba(236, 169, 37, 0.6);
    --border-light: rgba(227, 219, 203, 0.1);

    /* Ombres (Warm Glow) */

    /* Boutons register (Bleu gris tactique) */
    --btn-register-bg: linear-gradient(45deg, #2c3e50, #34495e);
    --btn-register-hover: linear-gradient(45deg, #34495e, #46627f);
    --btn-register-border: rgba(52, 73, 94, 0.5);
    --btn-register-shadow: 0 0 15px rgba(52, 73, 94, 0.3);

    /* Boutons extensions */
    --btn-extension-bg: linear-gradient(45deg, #2d5a40, #3d7a55);
    --btn-extension-border: rgba(61, 122, 85, 0.5);

    /* Boutons premium */
    --btn-premium-bg: linear-gradient(135deg, #b8860b 0%, #eca925 100%);
    --btn-premium-hover: linear-gradient(135deg, #eca925 0%, #ffd700 100%);

    /* Accent colors */
    --accent-purple: #9d4edd;
    --accent-gold: #eca925;
    --accent-green: #3d7a55;
    --accent-blue: #46627f;
    --accent-red: #c0392b;
    --accent-orange: #d35400;

    /* Status colors */
    --status-premium-bg: rgba(236, 169, 37, 0.15);
    --status-premium-border: rgba(236, 169, 37, 0.3);
    --status-premium-icon: #eca925;

    --status-free-bg: rgba(70, 98, 127, 0.15);
    --status-free-border: rgba(70, 98, 127, 0.3);
    --status-free-icon: #46627f;

    --status-guest-bg: rgba(157, 78, 221, 0.15);
    --status-guest-border: rgba(157, 78, 221, 0.3);
    --status-guest-icon: #9d4edd;

    /* Messages */
    --msg-error-bg: rgba(192, 57, 43, 0.15);
    --msg-error-border: rgba(192, 57, 43, 0.3);
    --msg-error-color: #e74c3c;

    --msg-success-bg: rgba(61, 122, 85, 0.15);
    --msg-success-border: rgba(61, 122, 85, 0.3);
    --msg-success-color: #2ecc71;

    --msg-info-bg: rgba(52, 73, 94, 0.15);
    --msg-info-border: rgba(52, 73, 94, 0.3);
    --msg-info-color: #3498db;

    --msg-warning-bg: rgba(211, 84, 0, 0.15);
    --msg-warning-border: rgba(211, 84, 0, 0.3);
    --msg-warning-color: #e67e22;

    /* Backdrop filter */
    --blur-sm: blur(5px);
    --blur-md: blur(10px);

    /* Fonts */
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-tech: 'JetBrains Mono', monospace;
}

/* ============================================
   TRANSITIONS ENTRE THÈMES
   Animation fluide lors du changement
   ============================================ */
body.theme-transitioning,
body.theme-transitioning * {
    transition: background 0.4s ease,
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease !important;
}

/* Désactiver les transitions d'animation existantes pendant le changement */
body.theme-transitioning .glass-card::before,
body.theme-transitioning .toggle-btn::before {
    transition: none !important;
}