@layer theme {
/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   v3 shipped a 27 KB dark sheet that re-declared component rules.
   v4 re-points ~20 semantic tokens; every component follows for free.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --bg:            #0a0a0c;
  --bg-sunken:     #121215;
  --bg-raised:     #16161a;
  --surface:       #131316;
  --surface-alt:   #1a1a1f;
  --surface-hover: #232329;

  --fg:            #f4f4f6;
  --fg-soft:       #d6d6dc;
  --fg-muted:      #a0a0aa;
  --fg-faint:      #6e6e79;

  --rule:          #2b2b32;
  --rule-soft:     #202026;
  --rule-strong:   #f4f4f6;

  --accent:        #ff4463;
  --accent-hover:  #ff6b83;
  --focus:         #7cb7ff;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.45);
  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.55), 0 18px 44px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* Category colours need lifting to stay AA on a near-black surface. */
:root[data-theme="dark"] {
  --cat-tv:        #4d9bff;
  --cat-film:      #c07fd0;
  --cat-music:     #35c48f;
  --cat-streaming: #ff8a5c;
  --cat-animation: #a693ff;
  --cat-theatre:   #ff6fa5;
  --cat-sports:    #4ec2d4;
  --cat-default:   var(--accent);
}

/* A logo authored for a white masthead reads as a bright rectangle on
   a near-black header. Giving it a deliberate plate makes it look
   intentional instead of broken. The real fix is a dark-mode logo
   asset; this is the graceful fallback until there is one. */
:root[data-theme="dark"] .tdn-brand img {
  background: #f4f4f6;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}

/* Art is slightly calmed so it doesn't glare against the dark page. */
:root[data-theme="dark"] .tdn-card__art img,
:root[data-theme="dark"] .fp-lead__art img,
:root[data-theme="dark"] .tdn-article__art img { filter: brightness(0.94) contrast(1.02); }

:root[data-theme="light"] { color-scheme: light; }

/* ── Forced colours (Windows High Contrast) ───────────────────────── */
@media (forced-colors: active) {
  .tdn-header, .tdn-footer { border-block-color: CanvasText; }
  .tdn-btn, .tdn-chip, .tdn-tag { forced-color-adjust: none; border: 1px solid ButtonBorder; }
  .tdn-kicker::before, .fp-mostread__bar span { forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}
}