/* ============================================================
//  (Frontend)       Common/CSS/themes.css
// ============================================================

/* ========== Common/CSS/themes.css ========== */

/* Le div #z7-bg est injecté par themes.js — position fixed derrière tout */
#z7-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    will-change: background;
}

/* Fond de base du body selon le thème (couleur solide) */
body, body[data-theme="aurora"]  { background: #080b13; }
body[data-theme="emerald"]       { background: #050e0a; }
body[data-theme="twilight"]      { background: #090610; }
body[data-theme="flame"]         { background: #0e0706; }
body[data-theme="gold"]          { background: #0d0a02; }

/* Lueurs du thème aurora (défaut) */
body[data-theme="aurora"]   #z7-bg,
body:not([data-theme])      #z7-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(51,198,255,0.2) 0%, transparent 50%);
}
body[data-theme="emerald"]  #z7-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(16,185,129,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(52,211,153,0.2) 0%, transparent 50%);
}
body[data-theme="twilight"] #z7-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(217,70,239,0.2) 0%, transparent 50%);
}
body[data-theme="flame"]    #z7-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(239,68,68,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(251,146,60,0.2) 0%, transparent 50%);
}
body[data-theme="gold"]     #z7-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,183,0,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(251,191,36,0.15) 0%, transparent 50%);
}