/* ═════════════════════════════════════════════════════════════════
   TDN MAGAZINE v3.0 — DARK MODE OVERRIDES
   ─────────────────────────────────────────────────────────────────
   Many of the component stylesheets in this theme hardcode light-
   mode colors (hex / rgb) rather than referencing semantic tokens.
   This file rewires those hardcoded values to the semantic tokens
   when dark mode is active, so the entire existing UI gets a
   proper dark treatment without rewriting every component file.

   Scope: activated by [data-theme="dark"] OR by @media
   (prefers-color-scheme: dark) when no explicit mode is set.
   ═════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════╗
   ║ HELPER MIXIN: apply dark overrides in both manual + OS cases  ║
   ╚═══════════════════════════════════════════════════════════════╝
   CSS has no real mixins, so we duplicate every block between the
   manual selector and the media query. To keep the file readable,
   related overrides are grouped by section. */

/* ─────────────────────────────────────────────────────────────────
   GLOBAL SWEEP — hardcoded light backgrounds
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] body,
:root[data-theme="dark"] .tdn-page-wrapper {
    background: var(--color-bg);
    color: var(--color-fg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body,
    :root:not([data-theme="light"]) .tdn-page-wrapper {
        background: var(--color-bg);
        color: var(--color-fg);
    }
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] #tdn-header {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-hdr-top {
    background: var(--color-surface);
    border-bottom-color: var(--color-border-soft);
}
:root[data-theme="dark"] .tdn-hdr-dateline {
    background: var(--color-bg-alt);
    color: var(--color-fg-muted);
    border-bottom-color: var(--color-border-soft);
}
:root[data-theme="dark"] .tdn-hdr-nav {
    background: var(--color-bg);
}
:root[data-theme="dark"] .tdn-hdr-nav-link {
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-hdr-nav-link:hover,
:root[data-theme="dark"] .tdn-hdr-nav-link.current {
    color: var(--color-accent);
}
:root[data-theme="dark"] .tdn-hdr-search-input {
    background: var(--color-surface-alt);
    color: var(--color-fg);
    border-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-hdr-search-input::placeholder {
    color: var(--color-fg-subtle);
}
:root[data-theme="dark"] .tdn-hdr-drawer {
    background: var(--color-surface);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-hdr-drawer a {
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-hdr-burger span {
    background: var(--color-fg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #tdn-header {
        background: var(--color-surface);
        border-bottom-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-hdr-top {
        background: var(--color-surface);
        border-bottom-color: var(--color-border-soft);
    }
    :root:not([data-theme="light"]) .tdn-hdr-dateline {
        background: var(--color-bg-alt);
        color: var(--color-fg-muted);
        border-bottom-color: var(--color-border-soft);
    }
    :root:not([data-theme="light"]) .tdn-hdr-nav {
        background: var(--color-bg);
    }
    :root:not([data-theme="light"]) .tdn-hdr-nav-link {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-hdr-nav-link:hover,
    :root:not([data-theme="light"]) .tdn-hdr-nav-link.current {
        color: var(--color-accent);
    }
    :root:not([data-theme="light"]) .tdn-hdr-search-input {
        background: var(--color-surface-alt);
        color: var(--color-fg);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-hdr-search-input::placeholder {
        color: var(--color-fg-subtle);
    }
    :root:not([data-theme="light"]) .tdn-hdr-drawer {
        background: var(--color-surface);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-hdr-drawer a {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-hdr-burger span {
        background: var(--color-fg);
    }
}

/* ─────────────────────────────────────────────────────────────────
   HOMEPAGE HERO
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .hp-hero {
    background: var(--color-bg);
}
:root[data-theme="dark"] .hp-hero__side-card {
    background: var(--color-surface);
}
:root[data-theme="dark"] .hp-hero__side-card:hover {
    background: var(--color-surface-hover);
}
:root[data-theme="dark"] .hp-hero__side-title,
:root[data-theme="dark"] .hp-hero__spotlight-title,
:root[data-theme="dark"] .hp-hero__trending-title {
    color: var(--color-fg);
}
:root[data-theme="dark"] .hp-hero__side-img-wrap,
:root[data-theme="dark"] .hp-hero__spotlight-img-wrap {
    background: var(--color-bg-soft);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hp-hero {
        background: var(--color-bg);
    }
    :root:not([data-theme="light"]) .hp-hero__side-card {
        background: var(--color-surface);
    }
    :root:not([data-theme="light"]) .hp-hero__side-card:hover {
        background: var(--color-surface-hover);
    }
    :root:not([data-theme="light"]) .hp-hero__side-title,
    :root:not([data-theme="light"]) .hp-hero__spotlight-title,
    :root:not([data-theme="light"]) .hp-hero__trending-title {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .hp-hero__side-img-wrap,
    :root:not([data-theme="light"]) .hp-hero__spotlight-img-wrap {
        background: var(--color-bg-soft);
    }
}

/* ─────────────────────────────────────────────────────────────────
   CARDS (river, spotlight, archive, related, sidebar)
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .hp-river,
:root[data-theme="dark"] .hp-trending,
:root[data-theme="dark"] .hp-cats,
:root[data-theme="dark"] .tdn-homepage-widgets {
    background: var(--color-bg);
}

:root[data-theme="dark"] .hp-river__item,
:root[data-theme="dark"] .tdn-archive-card,
:root[data-theme="dark"] .tdn-related-card,
:root[data-theme="dark"] .tdn-sidebar-card,
:root[data-theme="dark"] .hp-trending__item,
:root[data-theme="dark"] .hp-cat__card {
    background: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border-soft);
}

:root[data-theme="dark"] .hp-river__title,
:root[data-theme="dark"] .tdn-archive-card-title,
:root[data-theme="dark"] .tdn-related-card-title,
:root[data-theme="dark"] .tdn-sidebar-card-title,
:root[data-theme="dark"] .hp-trending__title,
:root[data-theme="dark"] .hp-cat__title {
    color: var(--color-fg);
}

:root[data-theme="dark"] .hp-river__excerpt,
:root[data-theme="dark"] .tdn-archive-card-excerpt,
:root[data-theme="dark"] .tdn-meta,
:root[data-theme="dark"] .tdn-byline {
    color: var(--color-fg-muted);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hp-river,
    :root:not([data-theme="light"]) .hp-trending,
    :root:not([data-theme="light"]) .hp-cats,
    :root:not([data-theme="light"]) .tdn-homepage-widgets {
        background: var(--color-bg);
    }
    :root:not([data-theme="light"]) .hp-river__item,
    :root:not([data-theme="light"]) .tdn-archive-card,
    :root:not([data-theme="light"]) .tdn-related-card,
    :root:not([data-theme="light"]) .tdn-sidebar-card,
    :root:not([data-theme="light"]) .hp-trending__item,
    :root:not([data-theme="light"]) .hp-cat__card {
        background: var(--color-surface);
        color: var(--color-fg);
        border-color: var(--color-border-soft);
    }
    :root:not([data-theme="light"]) .hp-river__title,
    :root:not([data-theme="light"]) .tdn-archive-card-title,
    :root:not([data-theme="light"]) .tdn-related-card-title,
    :root:not([data-theme="light"]) .tdn-sidebar-card-title,
    :root:not([data-theme="light"]) .hp-trending__title,
    :root:not([data-theme="light"]) .hp-cat__title {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .hp-river__excerpt,
    :root:not([data-theme="light"]) .tdn-archive-card-excerpt,
    :root:not([data-theme="light"]) .tdn-meta,
    :root:not([data-theme="light"]) .tdn-byline {
        color: var(--color-fg-muted);
    }
}

/* ─────────────────────────────────────────────────────────────────
   SINGLE POST / ARTICLE
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-single-wrap,
:root[data-theme="dark"] .tdn-main,
:root[data-theme="dark"] .tdn-article,
:root[data-theme="dark"] .tdn-page-wrap {
    background: var(--color-bg);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-article-title,
:root[data-theme="dark"] .tdn-article-content h2,
:root[data-theme="dark"] .tdn-article-content h3,
:root[data-theme="dark"] .tdn-article-content h4 {
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-article-content {
    color: var(--color-fg-soft);
}
:root[data-theme="dark"] .tdn-article-content a {
    color: var(--color-accent);
}
:root[data-theme="dark"] .tdn-article-content a:hover {
    color: var(--color-accent-hover);
}
:root[data-theme="dark"] .tdn-article-content blockquote {
    background: var(--color-surface-alt);
    border-left-color: var(--color-accent);
    color: var(--color-fg-soft);
}
:root[data-theme="dark"] .tdn-article-content code {
    background: var(--color-surface-alt);
    color: var(--color-fg);
    border-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-article-content pre {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-article-content hr {
    border-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-article-content figcaption {
    color: var(--color-fg-muted);
}
:root[data-theme="dark"] .tdn-article-content th,
:root[data-theme="dark"] .tdn-article-content td {
    border-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-article-content th {
    background: var(--color-surface-alt);
}

/* Drop cap in dark mode uses accent color */
:root[data-theme="dark"] .tdn-article-content > p:first-of-type::first-letter {
    color: var(--color-accent);
}

/* Tags */
:root[data-theme="dark"] .tdn-article-tags a {
    background: var(--color-surface-alt);
    color: var(--color-fg);
    border-color: var(--color-border);
}
:root[data-theme="dark"] .tdn-article-tags a:hover {
    background: var(--color-accent);
    color: var(--tdn-white);
    border-color: var(--color-accent);
}

/* Post navigation (prev/next) */
:root[data-theme="dark"] .tdn-post-nav-item {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-post-nav-item:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
}
:root[data-theme="dark"] .tdn-post-nav-item-label {
    color: var(--color-fg-muted);
}

/* Share buttons */
:root[data-theme="dark"] .tdn-article-share-btn {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-article-share-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--tdn-white);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-single-wrap,
    :root:not([data-theme="light"]) .tdn-main,
    :root:not([data-theme="light"]) .tdn-article,
    :root:not([data-theme="light"]) .tdn-page-wrap {
        background: var(--color-bg);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-article-title,
    :root:not([data-theme="light"]) .tdn-article-content h2,
    :root:not([data-theme="light"]) .tdn-article-content h3,
    :root:not([data-theme="light"]) .tdn-article-content h4 {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-article-content {
        color: var(--color-fg-soft);
    }
    :root:not([data-theme="light"]) .tdn-article-content a {
        color: var(--color-accent);
    }
    :root:not([data-theme="light"]) .tdn-article-content a:hover {
        color: var(--color-accent-hover);
    }
    :root:not([data-theme="light"]) .tdn-article-content blockquote {
        background: var(--color-surface-alt);
        border-left-color: var(--color-accent);
        color: var(--color-fg-soft);
    }
    :root:not([data-theme="light"]) .tdn-article-content code {
        background: var(--color-surface-alt);
        color: var(--color-fg);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-article-content pre {
        background: var(--color-surface-alt);
        border-color: var(--color-border);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-article-content hr {
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-article-content figcaption {
        color: var(--color-fg-muted);
    }
    :root:not([data-theme="light"]) .tdn-article-content th,
    :root:not([data-theme="light"]) .tdn-article-content td {
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-article-content th {
        background: var(--color-surface-alt);
    }
    :root:not([data-theme="light"]) .tdn-article-content > p:first-of-type::first-letter {
        color: var(--color-accent);
    }
    :root:not([data-theme="light"]) .tdn-article-tags a {
        background: var(--color-surface-alt);
        color: var(--color-fg);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) .tdn-article-tags a:hover {
        background: var(--color-accent);
        color: var(--tdn-white);
        border-color: var(--color-accent);
    }
    :root:not([data-theme="light"]) .tdn-post-nav-item {
        background: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-post-nav-item:hover {
        background: var(--color-surface-hover);
        border-color: var(--color-accent);
    }
    :root:not([data-theme="light"]) .tdn-post-nav-item-label {
        color: var(--color-fg-muted);
    }
    :root:not([data-theme="light"]) .tdn-article-share-btn {
        background: var(--color-surface-alt);
        border-color: var(--color-border);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-article-share-btn:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--tdn-white);
    }
}

/* ─────────────────────────────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-sidebar,
:root[data-theme="dark"] .tdn-sidebar-widget {
    background: transparent;
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-sidebar-widget-title {
    color: var(--color-fg);
    border-bottom-color: var(--color-border-strong);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-sidebar,
    :root:not([data-theme="light"]) .tdn-sidebar-widget {
        background: transparent;
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-sidebar-widget-title {
        color: var(--color-fg);
        border-bottom-color: var(--color-border-strong);
    }
}

/* ─────────────────────────────────────────────────────────────────
   ARCHIVE / SEARCH / 404
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-archive-header,
:root[data-theme="dark"] .tdn-search-header,
:root[data-theme="dark"] .tdn-404 {
    background: var(--color-bg);
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-archive-title,
:root[data-theme="dark"] .tdn-search-title,
:root[data-theme="dark"] .tdn-404-title {
    color: var(--color-fg);
}
:root[data-theme="dark"] .tdn-archive-desc,
:root[data-theme="dark"] .tdn-search-meta {
    color: var(--color-fg-muted);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-archive-header,
    :root:not([data-theme="light"]) .tdn-search-header,
    :root:not([data-theme="light"]) .tdn-404 {
        background: var(--color-bg);
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-archive-title,
    :root:not([data-theme="light"]) .tdn-search-title,
    :root:not([data-theme="light"]) .tdn-404-title {
        color: var(--color-fg);
    }
    :root:not([data-theme="light"]) .tdn-archive-desc,
    :root:not([data-theme="light"]) .tdn-search-meta {
        color: var(--color-fg-muted);
    }
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
/* Footer is already dark in the base theme — in dark mode we shift it
   deeper so there's still contrast with the body background. */

:root[data-theme="dark"] .tdn-footer {
    background: #000;
}
:root[data-theme="dark"] .tdn-footer a {
    color: var(--color-fg-soft);
}
:root[data-theme="dark"] .tdn-footer a:hover {
    color: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-footer {
        background: #000;
    }
    :root:not([data-theme="light"]) .tdn-footer a {
        color: var(--color-fg-soft);
    }
    :root:not([data-theme="light"]) .tdn-footer a:hover {
        color: var(--color-accent);
    }
}

/* ─────────────────────────────────────────────────────────────────
   BREADCRUMBS
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-breadcrumbs {
    background: var(--color-bg-alt);
    color: var(--color-fg-muted);
    border-bottom-color: var(--color-border-soft);
}
:root[data-theme="dark"] .tdn-breadcrumbs a {
    color: var(--color-fg-muted);
}
:root[data-theme="dark"] .tdn-breadcrumbs a:hover {
    color: var(--color-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-breadcrumbs {
        background: var(--color-bg-alt);
        color: var(--color-fg-muted);
        border-bottom-color: var(--color-border-soft);
    }
    :root:not([data-theme="light"]) .tdn-breadcrumbs a {
        color: var(--color-fg-muted);
    }
    :root:not([data-theme="light"]) .tdn-breadcrumbs a:hover {
        color: var(--color-accent);
    }
}

/* ─────────────────────────────────────────────────────────────────
   TICKER / LIVE ALERT
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-ticker {
    background: var(--color-surface);
    border-top-color: var(--color-border);
    border-bottom-color: var(--color-border);
    color: var(--color-fg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-ticker {
        background: var(--color-surface);
        border-top-color: var(--color-border);
        border-bottom-color: var(--color-border);
        color: var(--color-fg);
    }
}

/* ─────────────────────────────────────────────────────────────────
   LIVE SEARCH DROPDOWN
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .tdn-live-search-results,
:root[data-theme="dark"] .tdn-live-search__dropdown {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-fg);
    box-shadow: var(--shadow-xl);
}
:root[data-theme="dark"] .tdn-live-search-results a,
:root[data-theme="dark"] .tdn-live-search__item {
    color: var(--color-fg);
    border-bottom-color: var(--color-border-soft);
}
:root[data-theme="dark"] .tdn-live-search-results a:hover,
:root[data-theme="dark"] .tdn-live-search__item:hover,
:root[data-theme="dark"] .tdn-live-search__item.is-active {
    background: var(--color-surface-hover);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-live-search-results,
    :root:not([data-theme="light"]) .tdn-live-search__dropdown {
        background: var(--color-surface-elevated);
        border-color: var(--color-border);
        color: var(--color-fg);
        box-shadow: var(--shadow-xl);
    }
    :root:not([data-theme="light"]) .tdn-live-search-results a,
    :root:not([data-theme="light"]) .tdn-live-search__item {
        color: var(--color-fg);
        border-bottom-color: var(--color-border-soft);
    }
    :root:not([data-theme="light"]) .tdn-live-search-results a:hover,
    :root:not([data-theme="light"]) .tdn-live-search__item:hover,
    :root:not([data-theme="light"]) .tdn-live-search__item.is-active {
        background: var(--color-surface-hover);
    }
}

/* ─────────────────────────────────────────────────────────────────
   DIM IMAGES SLIGHTLY IN DARK MODE — cuts "punch-in-the-face" glare
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] img:not(.tdn-no-dim) {
    filter: brightness(.92);
    transition: filter var(--dur-normal);
}
:root[data-theme="dark"] a:hover img:not(.tdn-no-dim),
:root[data-theme="dark"] .tdn-article img {
    filter: brightness(1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img:not(.tdn-no-dim) {
        filter: brightness(.92);
        transition: filter var(--dur-normal);
    }
    :root:not([data-theme="light"]) a:hover img:not(.tdn-no-dim),
    :root:not([data-theme="light"]) .tdn-article img {
        filter: brightness(1);
    }
}

/* ─────────────────────────────────────────────────────────────────
   FORM INPUTS, TEXTAREAS, SELECTS
   ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--color-surface-alt);
    color: var(--color-fg);
    border-color: var(--color-border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--color-fg-subtle);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="text"],
    :root:not([data-theme="light"]) input[type="email"],
    :root:not([data-theme="light"]) input[type="search"],
    :root:not([data-theme="light"]) input[type="url"],
    :root:not([data-theme="light"]) input[type="password"],
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select {
        background: var(--color-surface-alt);
        color: var(--color-fg);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--color-fg-subtle);
    }
}