/* ============================================================
 * Fichier : themes.dynamic.css - V4 (Optimisation Dégradé)
 * Auteur : M. HEMERY
 * Objet : Thèmes dynamiques LUMA (Design Tokens + Palettes Saisonières)
 * Description : Centralisation des variables CSS et des tokens de design.
 * ============================================================
 */

/**
 * 🎨 Variables Globales (Design Tokens LUMA UI + Fallback)
 * Ceci est le bloc :root unique, définissant la base de l'interface.
 */
:root {
    /* ... [EXISTING DESIGN TOKENS] ... */
    --bg: #0f1216;
    --bg-elev1: #141820;
    --bg-elev2: #1a1f29;
    --surface: #1e2430;

    --text: #e8ecf1;
    --text-quiet: #b6c0cc;
    --muted: #93a0b3;
    --border: #2a3442;

    /* 1.1) Accent */
    --accent: #4f8cff;
    --accent-ink: #0b1a33;
    --accent-weak: color-mix(in oklab, var(--accent) 36%, black);
    --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);

    /* 1.2) States */
    --success: #3ecf8e;
    --warning: #ffcb2b;
    --danger: #ff5d73;

    /* 2) Compatibility & Legacy (Mapping des anciennes vars sur les nouvelles) */
    --primary-color: var(--accent);
    --primary-gold: var(--accent);
    --gold-glow: color-mix(in oklab, var(--accent) 50%, transparent);
    --dark-bg: var(--bg);
    --dark-card: var(--bg-elev1);
    --dark-card-hover: var(--bg-elev2);
    --text-primary: var(--text);
    --text-secondary: var(--text-quiet);
    --text-muted: var(--muted);
    --success-color: var(--success);
    --warning-color: var(--warning);
    --danger-color: var(--danger);

    /* NOUVELLE VARIABLE DE DÉGRADÉ (couleur plus claire) */
    --light-color: #8faaff;
    /* Version plus claire de l'accent par défaut */

    /* ... [OTHER TOKENS] ... */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --border-radius: var(--radius);
    --border-radius-lg: 16px;
    --shadow-1: 0 6px 20px rgba(0, 0, 0, .25);

    --ff: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --fs-100: 12px;
    --fs-200: 14px;
    --fs-300: 16px;
    --fs-400: 20px;
    --fs-500: 28px;
    --gap-1: 8px;
    --gap-2: 12px;
    --gap-3: 16px;
    --gap-4: 24px;
    --gap-5: 32px;
    --spacing-sm: var(--gap-3);
    --spacing-md: var(--gap-4);
    --spacing-lg: var(--gap-5);
    --spacing-xl: 4rem;

    --btn-h: 44px;
    --btn-px: 16px;
    --btn-gap: 10px;
    --t-fast: 120ms;
    --t-med: 200ms;
}

/**
 * 🌌 Thème par défaut — Infinity Core (Minimaliste Sombre)
 */
:root[data-theme="infinity-core"] {
    --primary-gold: #d4af37;
    --gold-glow: rgba(212, 175, 55, 0.4);
    --dark-bg: #0b1426;
    --dark-card: rgba(255, 255, 255, 0.05);
    --dark-card-hover: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #f44336;
    --light-color: #f0c040;
    /* Or plus clair */
}

/**
 * 🎄 Thèmes Saisonniers et Événementiels
 */

/* 🎄 Noël — Aurora Noel V4 */
:root[data-theme="aurora-noel"] {
    /* Fond général */
    --bg: #0b0f19;
    --bg-elev1: #111827;
    --bg-elev2: #0f1b2b;
    --surface: rgba(255, 255, 255, 0.03);

    /* Texte */
    --text: #eaf6ff;
    --text-quiet: #bcd0e0;
    --muted: #8ba2b5;

    /* Bordures */
    --border: rgba(255, 255, 255, 0.12);
    --line: rgba(255, 255, 255, 0.15);

    /* 🎄 Couleurs Noël réelles */
    --noel-red: #ff4d4d;
    --noel-green: #6adf87;
    --noel-gold: #ffd063;
    --noel-snow: #e8faff;

    /* Accent = GOLD Noël */
    --accent: var(--noel-gold);
    --accent-color: var(--noel-gold);
    --accent-ink: #3d2c00;

    /* Glow doré */
    --gold-glow: rgba(255, 208, 99, 0.45);

    /* Status */
    --success: #7cd989;
    --danger: #ff717a;
    --warning: #ffbb55;

    /* Focus */
    --focus: 0 0 0 3px rgba(255, 208, 99, 0.3);
}


/* HEADER NOËL */
[data-theme="aurora-noel"] .navbar {
    background: rgba(15, 24, 38, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 12px rgba(255, 208, 99, 0.25);
    backdrop-filter: blur(18px);
    position: relative;
}

/* Liens = or / vert / rouge */
[data-theme="aurora-noel"] .navbar__link {
    color: #e6edf5;
}

[data-theme="aurora-noel"] .navbar__link:hover {
    color: var(--noel-gold);
    text-shadow: 0 0 6px rgba(255, 208, 99, 0.4);
}

/* Logo = Or */
[data-theme="aurora-noel"] .navbar__logo:hover {
    color: var(--noel-gold);
    text-shadow: 0 0 10px rgba(255, 208, 99, 0.5);
}

/* ❄️ Flocons animés */
[data-theme="aurora-noel"] .navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/theme/noel/snowflakes.svg");
    background-repeat: repeat;
    background-size: 300px;
    opacity: 0.5;
    pointer-events: none;
    animation: snowFall 10s linear infinite;
}

@keyframes snowFall {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 300px;
    }
}

/* 🌙 Nouvel An — Stellar Dawn (V2) */
:root[data-theme="stellar-dawn"] {
    /* === BASE === */
    --bg: #0a0718;
    /* nuit plus profonde */
    --bg-elev1: #120e26;
    /* violet-nuit */
    --bg-elev2: #0c0a1f;
    /* bleu-nuit pur */
    --surface: rgba(255, 255, 255, 0.05);

    --text: #ffffff;
    --text-quiet: #dcdcff;
    --muted: #9a9ab5;

    /* === ACCENT (Champagne) === */
    --primary-gold: #ffe873;
    /* champagne doux */
    --accent: #ffe873;
    --accent-color: #ffe873;
    --accent-ink: #2f2900;

    /* === Lumière scintillante === */
    --light-color: #fffef5;

    /* Glow champagne intense */
    --gold-glow: rgba(255, 235, 150, 0.6);

    /* === Dégradé spécial Nouvel An (or → blanc étincelant) === */
    --secondary-gradient: #fff3c4;

    /* === BORDURES === */
    --border: rgba(255, 255, 255, 0.12);
    --line: rgba(255, 255, 255, 0.18);

    /* === STATUS (contrasté) === */
    --success: #aef59c;
    --danger: #ff667f;
    --warning: #ffe38b;

    /* === FOCUS === */
    --focus: 0 0 0 3px rgba(255, 240, 170, 0.35);

    /* === Ombre plus lumineuse === */
    --shadow-1: 0 6px 24px rgba(255, 235, 150, 0.15);

    /* === Menu === */
    --menu-bg: rgba(14, 10, 35, 0.9);
}


/* ========================================================
   MINI FEUX D'ARTIFICE 2026 — 100% CSS, ZÉRO HTML AJOUTÉ
   ======================================================== */
   [data-theme="stellar-dawn"] .navbar {
    position: relative;
}

/* On garde ton beau défilé d’étoiles filantes */
[data-theme="stellar-dawn"] .navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: 600px 60px;
    opacity: 0.55;
    pointer-events: none;
    animation: fireworksSlide 13s linear infinite;
    z-index: 1;
}

/* VRAIS MINI-FEUXX D’ARTIFICE (8 explosions aléatoires) */
[data-theme="stellar-dawn"] .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(circle at 18% 40%, #ffe873 3px, transparent 4px),
        radial-gradient(circle at 38% 25%, #fff8d6 2px, transparent 3px),
        radial-gradient(circle at 62% 55%, #ffe873 3px, transparent 4px),
        radial-gradient(circle at 82% 30%, #ffd700 3px, transparent 4px),
        radial-gradient(circle at 28% 70%, #ffe873 2px, transparent 3px),
        radial-gradient(circle at 75% 15%, #fff 3px, transparent 4px),
        radial-gradient(circle at 50% 45%, #ffe873 3px, transparent 4px),
        radial-gradient(circle at 90% 60%, #ffeb95 3px, transparent 4px);
    animation: fireworkPop 20s linear infinite;
}

@keyframes fireworkPop {
    0%, 8%   { transform: scale(0); opacity: 0; }
    10%      { transform: scale(1); opacity: 1;}
    15%      { transform: scale(2.5); opacity: 0; }
    15.01%, 28% { transform: scale(0); opacity: 0; }
    30%      { transform: scale(1); opacity: 1; }
    35%      { transform: scale(3); opacity: 0; }
    35.01%, 48% { transform: scale(0); opacity: 0; }
    50%      { transform: scale(1); opacity: 1; }
    55%      { transform: scale(2.8); opacity: 0; }
    55.01%, 68% { transform: scale(0); opacity: 0; }
    70%      { transform: scale(1); opacity: 1; }
    75%      { transform: scale(3.2); opacity: 0; }
    75.01%, 88% { transform: scale(0); opacity: 0; }
    90%      { transform: scale(1); opacity: 1; }
    95%      { transform: scale(3); opacity: 0; }
    100%     { transform: scale(0); opacity: 0; }
}

@keyframes sparklesFall {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 80px, 0 80px, 0 80px, 0 80px; }
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    [data-theme="stellar-dawn"] .navbar::before,
    [data-theme="stellar-dawn"] .navbar::after,
    [data-theme="stellar-dawn"] .navbar {
        animation: none !important;
        background: none !important;
    }
}




/* ❤️ Saint-Valentin — Crimson Pulse */
:root[data-theme="crimson-pulse"] {
    --primary-gold: #ff4081;
    --gold-glow: rgba(255, 64, 129, 0.6);
    --dark-bg: #1f0d14;
    --dark-card: rgba(255, 64, 129, 0.1);
    --dark-card-hover: rgba(255, 64, 129, 0.2);
    --text-primary: #ffebee;
    --light-color: #ff80ab;
    /* Rose moyen */
}

/* 🐣 Pâques — Golden Bloom */
:root[data-theme="golden-bloom"] {
    --primary-gold: #ffee58;
    --gold-glow: rgba(255, 238, 88, 0.5);
    --dark-bg: #1c210d;
    --dark-card: rgba(255, 255, 255, 0.05);
    --dark-card-hover: rgba(255, 255, 255, 0.1);
    --text-primary: #fffde7;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --success-color: #69f0ae;
    --light-color: #ffcc80;
    /* Orange pastel */
}

/* 🔥 Été — Solar Flux */
:root[data-theme="solar-flux"] {
    --primary-gold: #ffc107;
    --gold-glow: rgba(255, 193, 7, 0.6);
    --dark-bg: #1a160d;
    --dark-card: rgba(255, 255, 255, 0.08);
    --dark-card-hover: rgba(255, 255, 255, 0.15);
    --text-primary: #fff8e1;
    --success-color: #ff9800;
    --light-color: #ffeb3b;
    /* Jaune plus vif */
}

/* 🇫🇷 14 Juillet — Eclipse Tricolore (Drapeau Français) */
:root[data-theme="eclipse-tricolore"] {
    --primary-gold: #0055a4;
    /* Bleu de France */
    --tricolor-white: #ffffff;
    /* Le blanc du drapeau */
    --gold-glow: rgba(244, 67, 54, 0.5);
    /* Rouge pour le glow */
    --dark-bg: #0e0e1a;
    --dark-card: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --warning-color: #f44336;
    /* Rouge */
    --success-color: #e3f2fd;
    --light-color: var(--tricolor-white);
    /* Utilise le blanc pour l'étape du milieu du drapeau */
}

/* 🎃 Halloween — Eclipse Hollow */
:root[data-theme="eclipse-hollow"] {
    --primary-gold: #ff5722;
    --gold-glow: rgba(255, 87, 34, 0.6);
    --dark-bg: #0f0a0d;
    --dark-card: rgba(255, 255, 255, 0.05);
    --dark-card-hover: rgba(255, 255, 255, 0.1);
    --text-primary: #fff3e0;
    --warning-color: #ff9800;
    --light-color: #ff8a65;
    /* Orange plus doux */
}

/**
 * ⚙️ Thèmes Techniques
 */

/* 💻 Lancement produit — LUMA Neon */
:root[data-theme="luma-neon"] {
    --primary-gold: #00e5ff;
    --gold-glow: rgba(0, 229, 255, 0.8);
    --dark-bg: #070014;
    --dark-card: rgba(0, 229, 255, 0.15);
    --dark-card-hover: rgba(0, 229, 255, 0.25);
    --text-primary: #e0f7fa;
    --text-secondary: rgba(224, 247, 250, 0.7);
    --light-color: #84ffff;
    /* Cyan très clair */
}

/* ⚙️ Maintenance — Reacher Mode */
:root[data-theme="reacher-mode"] {
    --primary-gold: #607d8b;
    --gold-glow: rgba(96, 125, 139, 0.4);
    --dark-bg: #1d212a;
    --dark-card: rgba(255, 255, 255, 0.05);
    --dark-card-hover: rgba(255, 255, 255, 0.1);
    --text-primary: #cfd8dc;
    --warning-color: #ffab00;
    --light-color: #b0bec5;
    /* Gris clair */
}