/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
    :root {
        --navy: #0B1120;
        --navy-light: #151D2E;

        --text-heading: #E2E8F0;
        --text-body: #CBD5E1;
        --text-secondary: #94A3B8;

        --bg-main: #0F172A;
        --bg-card: #1E293B;
        --bg-section: #1E293B;

        --border: #334155;
        --border-light: #1E293B;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    body {
        background: var(--bg-main);
        color: var(--text-body);
    }

    /* Navbar stays dark — just tweak opacity */
    .navbar {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .navbar__links li a {
        color: #64748B;
    }

    .navbar__links li a:hover,
    .navbar__links li.active a {
        color: var(--text-inverse);
        background: rgba(255, 255, 255, 0.06);
    }

    /* Cards */
    .card {
        border-color: var(--border);
    }

    .card__title a {
        color: var(--text-heading);
    }

    .card__title a:hover {
        color: var(--emerald);
    }

    /* Article */
    .article-body {
        color: var(--text-body);
    }

    .article-body h2,
    .article-body h3 {
        color: var(--text-heading);
    }

    .article-body blockquote {
        background: rgba(16, 185, 129, 0.08);
        border-left-color: var(--emerald);
        color: var(--text-heading);
    }

    .article-body .data-highlight {
        background: rgba(16, 185, 129, 0.08);
        border-left-color: var(--emerald);
    }

    .article-body .data-highlight strong,
    .article-body .data-highlight b {
        color: var(--emerald);
    }

    .article-body th {
        color: var(--text-secondary);
        border-bottom-color: var(--border);
    }

    .article-body td {
        border-bottom-color: var(--border-light);
    }

    .article-body tr:nth-child(even) {
        background: var(--bg-section);
    }

    /* Tags */
    .tag {
        background: var(--bg-section);
        color: var(--text-secondary);
    }

    .tag:hover {
        background: rgba(16, 185, 129, 0.1);
        color: var(--emerald);
    }

    /* Section title */
    .section-title {
        color: var(--text-heading);
    }

    /* Footer */
    .site-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Pagination */
    .pagination .page-numbers {
        border-color: var(--border);
        color: var(--text-body);
    }

    .pagination .page-numbers:hover:not(.current) {
        border-color: var(--emerald);
        color: var(--emerald);
    }

    /* Newsletter */
    .newsletter {
        background: var(--emerald-hover);
    }

    /* Images — slight dim for comfort */
    .card__image img,
    .hero__image img {
        filter: brightness(0.92);
    }

    .card:hover .card__image img {
        filter: brightness(1);
    }

    /* Search */
    .search-form input[type="search"] {
        background: var(--bg-card);
        border-color: var(--border);
        color: var(--text-body);
    }

    /* Widgets */
    .widget-title {
        color: var(--text-heading);
    }

    /* Archive */
    .archive-header__title {
        color: var(--text-heading);
    }
}