/* ============================================
   ARENA - Theme System
   Mode clair par défaut, mode sombre avec [data-theme="dark"]
   ============================================ */

/* ============================================
   Mode Clair (Défaut) - Premium Sport Lifestyle
   ============================================ */
:root {
    /* Brand Colors - Identiques pour les deux thèmes */
    --color-primary: #EA4C23;
    --color-primary-dark: #c93d1a;
    --color-primary-light: #ff6b47;
    --color-secondary: #FF8C42;
    --color-accent: #FFD166;
    --color-success: #10B981;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-warm: linear-gradient(135deg, #FEF7F0 0%, #FFF9F5 50%, #FFFBF8 100%);
    --gradient-mesh: radial-gradient(ellipse at 20% 0%, rgba(234, 76, 35, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 80% 100%, rgba(255, 140, 66, 0.06) 0%, transparent 50%);

    /* Background Colors - Mode Clair (tons sable/beige) */
    --bg-body: #FAF6F1;
    --bg-primary: #FAF6F1;
    --bg-secondary: #F5EFE8;
    --bg-tertiary: #EFE8DF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFCFA;
    --bg-input: #F8F5F1;
    --bg-overlay: rgba(250, 246, 241, 0.98);
    --bg-header-scrolled: rgba(250, 246, 241, 0.95);

    /* Text Colors - Mode Clair */
    --text-primary: #1C1917;
    --text-secondary: #44403C;
    --text-tertiary: #6B6560;
    --text-muted: #9C9590;
    --text-inverse: #FAF6F1;

    /* Border Colors - Mode Clair (plus visibles) */
    --border-light: rgba(28, 25, 23, 0.10);
    --border-medium: rgba(28, 25, 23, 0.15);
    --border-strong: rgba(28, 25, 23, 0.25);

    /* Component-specific - Mode Clair */
    --loader-bg: #FAF6F1;
    --nav-bg: rgba(250, 246, 241, 0.95);
    --hero-pattern: rgba(234, 76, 35, 0.04);
    --hero-gradient-opacity: 0.10;
    --card-shadow: 0 2px 8px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(234, 76, 35, 0.08);
    --card-shadow-hover: 0 4px 16px rgba(28, 25, 23, 0.08), 0 16px 48px rgba(234, 76, 35, 0.12);
    --stat-divider: rgba(234, 76, 35, 0.20);
    --scroll-border: rgba(28, 25, 23, 0.15);
    --img-placeholder-bg: linear-gradient(145deg, #E8E0D6 0%, #D9CFC3 100%);
    --map-filter: none;

    /* Section Backgrounds - Mode Clair (fond unifié) */
    --section-hero-bg: #FAF6F1;
    --section-about-bg: #FAF6F1;
    --section-sports-bg: #FAF6F1;
    --section-facilities-bg: #F0EAE2;
    --section-events-bg: #FAF6F1;
    --section-booking-bg: #FAF6F1;
    --section-contact-bg: #FAF6F1;
    --footer-bg: #1C1917;

    /* Special Elements */
    --badge-bg: rgba(234, 76, 35, 0.10);
    --badge-border: rgba(234, 76, 35, 0.25);
    --icon-bg: rgba(234, 76, 35, 0.10);
    --floating-card-bg: rgba(255, 255, 255, 0.98);

    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px rgba(234, 76, 35, 0.08);
}

/* ============================================
   Mode Sombre
   ============================================ */
[data-theme="dark"] {
    /* Background Colors - Mode Sombre */
    --bg-body: #0a0a0a;
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-input: #1a1a1a;
    --bg-overlay: rgba(10, 10, 10, 0.95);
    --bg-header-scrolled: rgba(10, 10, 10, 0.95);

    /* Text Colors - Mode Sombre */
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-tertiary: #a3a3a3;
    --text-muted: #6b6b6b;
    --text-inverse: #0a0a0a;

    /* Border Colors - Mode Sombre */
    --border-light: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* Component-specific - Mode Sombre */
    --loader-bg: #0a0a0a;
    --nav-bg: rgba(10, 10, 10, 0.95);
    --hero-pattern: rgba(255, 255, 255, 0.03);
    --hero-gradient-opacity: 0.15;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --stat-divider: rgba(255, 255, 255, 0.1);
    --scroll-border: rgba(255, 255, 255, 0.2);
    --img-placeholder-bg: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    --map-filter: grayscale(1) invert(1) contrast(0.9);

    /* Section Backgrounds - Mode Sombre */
    --section-hero-bg: #0a0a0a;
    --section-about-bg: #141414;
    --section-sports-bg: #0a0a0a;
    --section-facilities-bg: #1a1a1a;
    --section-events-bg: #141414;
    --section-booking-bg: #0a0a0a;
    --section-contact-bg: #141414;
    --footer-bg: #0a0a0a;

    /* Special Elements */
    --badge-bg: rgba(234, 76, 35, 0.1);
    --badge-border: rgba(234, 76, 35, 0.3);
    --icon-bg: rgba(234, 76, 35, 0.1);
    --floating-card-bg: rgba(10, 10, 10, 0.9);
}

/* ============================================
   Transitions pour le changement de thème
   ============================================ */
html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body,
.header,
.loader,
.nav-menu,
.sport-card,
.booking-form-wrapper,
.footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   Logo Theme Switching
   ============================================ */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}