/* =========================================================
   DARK MODE VARIABLES — ACTIVE ONLY IN DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --esk-bg: #060a12;
        --esk-bg-soft: rgba(40,45,60,0.45);
        --esk-text: #e8ebf2;
        --esk-text-muted: rgba(255,255,255,0.55);

        --esk-card-bg: rgba(160, 178, 216, 0.15);
        --esk-border: rgba(255,255,255,0.12);

        --esk-primary: #9d6bff;
        --esk-yellow: #facc15;
    }
}

/* =========================================================
   GLASS CARDS — ONLY IN DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    .esk-card,
    .esk-card-featured {
        background: rgba(145, 108, 181, 0.10) !important;
        border: 1px solid var(--esk-border) !important;

        box-shadow:
            0 8px 26px rgba(0,0,0,0.45),
            0 0 0 1px rgba(255,255,255,0.04) inset !important;

        border-radius: 24px !important;
    }
}

/* =========================================================
   TEXTS — ONLY IN DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6,
    .esk-title {
        color: var(--esk-text) !important;
    }

    p,
    li,
    .esk-subtitle {
        color: var(--esk-text-muted) !important;
    }
}

/* =========================================================
   BUTTONS — ONLY IN DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    .esk-btn {
        background: rgba(255,255,255,0.08) !important;
        color: var(--esk-text) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }

    .esk-btn-primary {
        background: #7c3aed69 !important;
        color: #fff !important;
        box-shadow: 0 6px 20px rgba(124,58,237,0.2) !important;
    }
}

/* =========================================================
   LINKS — ONLY IN DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    a {
        color: var(--esk-primary) !important;
    }
}