/*
 * Dark mode surface overrides
 * Activated automatically by the browser when the OS/user preference is dark.
 * All colours are drawn from CSS custom properties defined in variables.css.
 * NAV and FOOTER retain color-scheme: only light (defined in nav.css) and are
 * intentionally left out here — they always render in light mode.
 */

@media (prefers-color-scheme: dark) {

  /* ── Base ─────────────────────────────────────────────────────────────── */

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

  /* ── General surfaces ─────────────────────────────────────────────────── */

  DIV.introduction {
    background: var(--color-bg-info);
    border-left-color: var(--color-bg-info-border);
  }

  DIV.overview > SECTION,
  DIV.step {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
  }

  DIV.info-container > DIV,
  DIV.info-block {
    background-color: var(--color-bg-info-block);
  }

  /* ── Sidebar ──────────────────────────────────────────────────────────── */

  div.sidebar {
    background: var(--color-bg-sidebar) !important;
  }

  div.sidebar section {
    background: var(--color-bg-sidebar-section) !important;
    border-color: var(--color-border-subtle) !important;
    box-shadow: 0 12px 28px var(--color-shadow-card) !important;
  }

  div.sidebar section:hover {
    box-shadow: 0 18px 35px var(--color-shadow-card-hover) !important;
  }

  div.sidebar h3 {
    color: var(--color-text-sidebar-h3);
  }

  div.sidebar p,
  aside.sidebar p {
    color: var(--color-text-muted);
  }

  div.sidebar ul.posts li,
  aside.sidebar ul.posts li {
    border-bottom-color: var(--color-border-posts);
  }

  div.two-columns.contracting-guidelines .column-right {
    border-left-color: var(--color-border);
  }

  /* ── Links ────────────────────────────────────────────────────────────── */

  .future-link {
    color: var(--color-link-future);
  }

  .future-link-note {
    color: var(--color-link-future-note);
  }

  /* ── Hero cards ───────────────────────────────────────────────────────── */

  .hero-card {
    background: var(--color-bg-hero-card);
    box-shadow: 0 12px 30px var(--color-shadow-card);
  }

  .hero-card:hover {
    box-shadow: 0 16px 36px var(--color-shadow-card-hover);
  }

  .hero-portrait {
    background: var(--color-bg-muted);
  }

  .hero-placeholder {
    background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
    color: var(--color-text-muted);
  }

  .hero-footnote {
    color: var(--color-text-muted);
  }

  p.hero-timeframe,
  p.hero-principle span,
  p.hero-credit {
    color: var(--color-text-subtle);
  }

  /* ── Article images ───────────────────────────────────────────────────── */

  figure.article-image figcaption,
  figure.hero-image figcaption {
    color: var(--color-text-subtle);
  }

  figure.hero-image img {
    box-shadow: 0 4px 12px var(--color-shadow-card);
  }

  /* ── FAQ ──────────────────────────────────────────────────────────────── */

  .faq-item {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-subtle);
    box-shadow: 0 2px 8px var(--color-shadow-card);
  }

  .faq-item:hover {
    box-shadow: 0 4px 12px var(--color-shadow-card-hover);
  }

  .faq-answer {
    color: var(--color-text-faq-answer);
  }

  .faq-toc-section a {
    color: var(--color-text-faq-toc);
  }

  /* ── Overview feeds ───────────────────────────────────────────────────── */

  .overview-card {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    box-shadow: 0 3px 14px var(--color-shadow-card);
  }

  .overview-card:hover {
    box-shadow: 0 7px 22px var(--color-shadow-card-hover);
  }

  .overview-lead {
    color: var(--color-text-muted);
  }

  .overview-framing {
    color: var(--color-text-muted);
    background: linear-gradient(180deg, #1e1a17 0%, #1a1511 100%);
    border-color: var(--color-border);
  }

  /* ── Code / syntax ────────────────────────────────────────────────────── */

  pre, code {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
  }

}