/*
 * Netrunner Theme — Dark Mode CSS
 * Sobrescreve as custom properties do :root quando o body tem a classe .dark-mode
 */

/* ─── Dark Mode via classe JS ──────────────────────────────────────────────── */
body.dark-mode {
    --color-bg:        #0f172a;
    --color-text:      #f1f5f9;
    --color-primary:   #818cf8;
    --color-secondary: #22d3ee;
    --color-card:      #1e293b;
    --color-border:    #334155;
    --color-muted:     #94a3b8;
    --color-white:     #f1f5f9;
}

/* ─── Preferência do sistema operacional (quando não há classe JS) ─────────── */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --color-bg:        #0f172a;
        --color-text:      #f1f5f9;
        --color-primary:   #818cf8;
        --color-secondary: #22d3ee;
        --color-card:      #1e293b;
        --color-border:    #334155;
        --color-muted:     #94a3b8;
        --color-white:     #f1f5f9;
    }
}

/* ─── Toggle icon: mostrar lua no dark, sol no light ──────────────────────── */
body.dark-mode .dark-mode-toggle .icon-sun  { display: none; }
body.dark-mode .dark-mode-toggle .icon-moon { display: inline; }

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .dark-mode-toggle .icon-sun  { display: none; }
    body:not(.light-mode) .dark-mode-toggle .icon-moon { display: inline; }
}

/* ─── Header em dark mode ──────────────────────────────────────────────────── */
body.dark-mode .site-header,
body:not(.light-mode):is(@media (prefers-color-scheme: dark)) .site-header {
    background: rgba(15, 23, 42, 0.88);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .site-header {
        background: rgba(15, 23, 42, 0.88);
    }
}

/* ─── Sombras em dark mode ─────────────────────────────────────────────────── */
body.dark-mode {
    --shadow-sm:  0 1px 3px rgba(0,0,0,.3),  0 1px 2px rgba(0,0,0,.2);
    --shadow-md:  0 4px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --shadow-sm:  0 1px 3px rgba(0,0,0,.3),  0 1px 2px rgba(0,0,0,.2);
        --shadow-md:  0 4px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
        --shadow-lg:  0 12px 40px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
    }
}

/* ─── Ajustes de code block em dark mode ───────────────────────────────────── */
body.dark-mode .entry-content pre {
    background: #020617;
    border: 1px solid var(--color-border);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .entry-content pre {
        background: #020617;
        border: 1px solid var(--color-border);
    }
}

/* ─── Footer em dark mode (já é escuro, mas ajusta nuances) ────────────────── */
body.dark-mode .site-footer {
    background: #020617;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .site-footer {
        background: #020617;
    }
}

/* ─── Share buttons em dark mode ───────────────────────────────────────────── */
body.dark-mode .share-twitter {
    background: rgba(255,255,255,.06);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .share-twitter {
        background: rgba(255,255,255,.06);
        color: var(--color-text);
    }
}

/* ─── Placeholder de imagem em dark mode ───────────────────────────────────── */
body.dark-mode .card-thumb-placeholder {
    background: linear-gradient(135deg, rgba(129,140,248,.08), rgba(34,211,238,.08));
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .card-thumb-placeholder {
        background: linear-gradient(135deg, rgba(129,140,248,.08), rgba(34,211,238,.08));
    }
}

/* ─── Entry content links em dark mode ─────────────────────────────────────── */
body.dark-mode .entry-content a {
    color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .entry-content a {
        color: var(--color-primary);
    }
}

/* ─── Blockquote em dark mode ──────────────────────────────────────────────── */
body.dark-mode .entry-content blockquote {
    background: rgba(129,140,248,.06);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .entry-content blockquote {
        background: rgba(129,140,248,.06);
    }
}

/* ─── Inline code em dark mode ─────────────────────────────────────────────── */
body.dark-mode .entry-content code {
    background: rgba(129,140,248,.12);
    color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .entry-content code {
        background: rgba(129,140,248,.12);
        color: var(--color-primary);
    }
}