/* ==========================================================
🌞 DEFAULT
========================================================== */

:root {
    color-scheme: light;
}


/* ==========================================================
🌌 DARK
========================================================== */

body.cls-theme-dark {
    --cls-bg: #0F172A;
    --cls-surface: rgba(15,23,42,0.88);
    --cls-surface-solid: #111827;
    --cls-card-bg-color: rgba(15,23,42,0.78);
    --cls-surface-elevated: rgba(15,23,42,0.96);

    --cls-glass-bg: rgba(15,23,42,0.72);
    --cls-glass-border: rgba(255,255,255,0.06);

    --cls-text: #F8FAFC;
    --cls-text-soft: #CBD5E1;
    --cls-text-muted: #94A3B8;

    --cls-input-bg: rgba(15,23,42,0.82);
    --cls-input-border: 1px solid rgba(255,255,255,0.08);

    --cls-select-dropdown-bg: rgba(15,23,42,0.96);
    --cls-select-dropdown-border: 1px solid rgba(255,255,255,0.06);

    --cls-modal-bg: rgba(15,23,42,0.78);
    --cls-route-bg: rgba(15,23,42,0.9);
}


/* ==========================================================
👑 GOLD
========================================================== */

body.cls-theme-gold {
    --cls-primary: #D4AF37;
    --cls-primary-hover: #C39B2F;
    --cls-secondary: #F4D06F;
    --cls-accent: #FFD700;

    --cls-text: #1F2937;
    --cls-text-soft: #6B7280;

    --cls-card-bg-color: #FFFDF7;
    --cls-surface: #FFFBEB;

    --cls-input-bg: #FFFFFF;
    --cls-input-border: 1px solid rgba(212,175,55,0.25);

    --cls-btn-gradient-start: #D4AF37;
    --cls-btn-gradient-end: #F4D06F;
}


/* ==========================================================
⚫ MIDNIGHT
========================================================== */

body.cls-theme-midnight {
    --cls-primary: #8B5CF6;
    --cls-secondary: #6366F1;
    --cls-bg: #020617;

    --cls-card-bg-color: rgba(2,6,23,0.78);
    --cls-text: #E2E8F0;
}


/* ==========================================================
⚪ CLEAN
========================================================== */

body.cls-theme-clean {
    --cls-bg: #FFFFFF;
    --cls-card-bg-color: #FFFFFF;
    --cls-text: #111827;
}


/* ==========================================================
🎨 AUTO DARK
========================================================== */

@media (prefers-color-scheme: dark) {
    body.cls-theme-auto {
        --cls-bg: #0F172A;
        --cls-card-bg-color: rgba(15,23,42,0.78);
        --cls-text: #F8FAFC;
    }
}