/* KilusNa dark mode — applied only when the OS/browser requests it.
   Light-mode rendering is byte-identical: every rule below lives inside the
   media query. Token-driven components adapt via remapped --color-* vars;
   legacy hardcoded slate surfaces are overridden explicitly. Intentionally
   dark surfaces (hero gradient, topbar, dark buttons, overlays) are excluded.
   Font colors were the #1 breakage: all body text resolves to light tones. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-brand-light: #3A2226;
        --color-brand-red-light: #33191D;
        --color-text-primary: #EDEFF2;
        --color-text-secondary: #C7CDD4;
        --color-text-muted: #9AA1AB;
        --color-surface: #1A1D22;
        --color-surface-secondary: #16191E;
        --color-bg-main: #101216;
        --color-border: #2E333B;
        --color-border-input: #3A4150;
        --color-focus-ring: rgba(229, 72, 77, 0.25);
    }

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

    /* Site header: hardcoded translucent white upstream. Dark glass here. */
    .header {
        background: rgba(16, 18, 22, 0.92);
        border-bottom: 1px solid var(--color-border);
    }
    .header-search input:focus {
        background: var(--color-surface);
    }
    .header .badge {
        filter: brightness(0.85) saturate(0.9);
    }
    /* All status pills (admin, profiles, FW): tone down the pastel glare,
       keep hue meaning. Covers present and future .badge-* variants. */
    .badge,
    [class*="badge-"] {
        filter: brightness(0.88) saturate(0.92);
    }

    /* Legacy slate layer (style.css): light pages, cards, modals */
    .card,
    .modal,
    .dropdown {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text-primary);
    }
    .modal-header,
    .modal-footer {
        border-color: var(--color-border);
    }
    .modal-close:hover {
        color: var(--color-text-primary);
    }

    /* Legacy slate text scale → light tones */
    h1, h2, h3, h4, h5, h6,
    .modal-header h2,
    .wizard-title {
        color: var(--color-text-primary);
    }

    /* Form controls (legacy + wizard share these hues) */
    input[type="text"], input[type="url"], input[type="email"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="date"], textarea, select {
        background-color: var(--color-surface);
        border-color: var(--color-border-input);
        color: var(--color-text-primary);
    }
    input::placeholder, textarea::placeholder {
        color: var(--color-text-muted);
    }
    .form-group label {
        color: var(--color-text-secondary);
    }
    .article-editor-wrapper {
        background: var(--color-surface);
    }

    /* Report/feed cards rendered with hardcoded slate text */
    .report-card {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }
    .report-title {
        color: var(--color-text-primary);
    }
    .report-summary {
        color: var(--color-text-secondary);
    }
    .report-category {
        background-color: var(--color-brand-light);
        color: #FCA5A5;
    }
    .report-author {
        color: var(--color-text-secondary);
    }
    .react-btn {
        color: var(--color-text-secondary);
    }
    .react-btn.upvote.active {
        background: #14352A;
        border-color: #16A34A;
        color: #6EE7B7;
    }
    .react-btn.downvote.active {
        background: #3A2226;
        border-color: #DC2626;
        color: #FCA5A5;
    }
    .react-btn.bookmark.active {
        background: #3A2E14;
        border-color: #D97706;
        color: #FCD34D;
    }
    .pub-pill-topic {
        background: #2A2350;
        color: #C4B5FD;
    }

    /* Pastel status badges keep meaning, lose the glare */
    .verdict-card-badge {
        filter: saturate(0.85) brightness(0.9);
    }

    /* Light gray page washes */
    .sidebar-left,
    .verified-cta {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text-primary);
    }
    .sidebar-nav-link {
        color: var(--color-text-secondary);
    }
    .sidebar-nav-link:hover,
    .sidebar-nav-link.active {
        color: var(--color-text-primary);
    }

    /* Tables / admin grids */
    table {
        color: var(--color-text-primary);
    }
    th, td {
        border-color: var(--color-border);
    }

    /* Base links use color:inherit, so they follow body text. Only keep
       explicitly light-on-brand controls white. */
    .hero-btn-primary {
        color: #fff;
    }

    /* Unmapped muted wash (DM bubbles, misc fills): light gray upstream. */
    :root {
        --color-bg-muted: #23282F;
    }

    /* Hardcoded white surfaces: unreadable once body text goes light. */
    .dm-thread,
    .dm-conversation {
        background-color: var(--color-surface);
    }
    .sort-btn,
    .filter-btn {
        background-color: var(--color-surface);
        color: var(--color-text-secondary);
    }
    .sort-btn:hover,
    .filter-btn:hover {
        color: var(--color-brand);
    }
    .header-search input:focus {
        background-color: var(--color-surface);
    }

    /* Pastel pill families (status/type/fact-check/pills/why/verify):
       dark text on pastel is readable but glaring; tone down like badges. */
    .pub-pill,
    [class*="pub-status-"],
    [class*="pub-type-"],
    [class*="pub-fc-"],
    .report-why,
    [class*="v-badge"] {
        filter: brightness(0.88) saturate(0.92);
    }

    /* Brand lockups are RGB PNGs (white baked in, no alpha): present
       them as deliberate badges with a hairline ring on dark glass. A
       transparent-background asset is a drop-in swap when available. */
    .header-logo-img,
    .mobile-nav-logo-img,
    .footer-logo-img,
    .tv-logo-img {
        outline: 1px solid var(--color-border);
        outline-offset: -1px;
    }

    /* Dark-on-dark button: keep it distinguishable from the page. */
    .hero-btn-dark {
        background-color: #232A35;
        border-color: #3A4150;
    }
    .hero-btn-dark:hover {
        background-color: #2C3440;
    }

    /* Dim slate copy hardcoded for light surfaces. */
    .pub-empty,
    .pub-empty p,
    .text-muted {
        color: var(--color-text-muted);
    }

    /* TV page inline styles (hardcoded white cards/buttons). */
    .video-card {
        background-color: var(--color-surface);
    }
    .kilosph-tv-page .filter-btn {
        background-color: var(--color-surface);
        color: var(--color-text-secondary);
    }
    .video-category {
        filter: brightness(0.88) saturate(0.92);
    }
}