/*
 * 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);
  }

  input,
  textarea,
  select {
    background-color: var(--color-bg-input);
    color: var(--color-text-body);
    border-color: var(--color-border);
  }

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

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

  .article-intro,
  .callout-box,
  blockquote,
  .card,
  .inline-newsletter-cta,
  .newsletter-box,
  .contact-box,
  .reminder-box,
  .related-article-card {
    box-shadow: 0 10px 24px var(--color-shadow-card);
  }

  .inline-newsletter-cta {
    background: #1a202b !important;
    border-left-color: var(--secondary-color) !important;
  }

  .inline-cta-value,
  .inline-cta-privacy {
    color: #c3cad4 !important;
  }

  .inline-cta-hook {
    color: var(--primary-color) !important;
  }

  .inline-cta-form input[type="email"] {
    background: #15181d !important;
    color: #e8e8e8 !important;
    border-color: var(--color-border) !important;
  }

  .inline-cta-privacy a {
    color: #9aa5b4 !important;
  }

  .article-intro p,
  .callout-box,
  .inline-cta-value,
  .inline-cta-privacy,
  .newsletter-box > p,
  .contact-box > p,
  .related-article-body p,
  .page-intro,
  .call-to-action .cta-subtext {
    color: var(--color-text-soft);
  }

  .related-articles h2,
  .related-article-body h3,
  .inline-cta-hook,
  .newsletter-box h2,
  .contact-box h2 {
    color: var(--color-text-strong);
  }

  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);
  }

  .blog-entry a:not(.button):not(.related-article-card),
  .article-intro a:not(.button),
  .callout-box a:not(.button),
  .inline-newsletter-cta a:not(.button),
  .newsletter-box a:not(.button),
  .contact-box a:not(.button),
  .reminder-box a:not(.button),
  blockquote a:not(.button) {
    color: var(--color-link-inline);
    text-decoration-color: color-mix(in srgb, var(--color-link-inline) 65%, transparent);
  }

  .blog-entry a:not(.button):not(.related-article-card):visited,
  .article-intro a:not(.button):visited,
  .callout-box a:not(.button):visited,
  .inline-newsletter-cta a:not(.button):visited,
  .newsletter-box a:not(.button):visited,
  .contact-box a:not(.button):visited,
  .reminder-box a:not(.button):visited,
  blockquote a:not(.button):visited {
    color: var(--color-link-inline-visited);
  }

  .blog-entry a:not(.button):not(.related-article-card):hover,
  .article-intro a:not(.button):hover,
  .callout-box a:not(.button):hover,
  .inline-newsletter-cta a:not(.button):hover,
  .newsletter-box a:not(.button):hover,
  .contact-box a:not(.button):hover,
  .reminder-box a:not(.button):hover,
  blockquote a:not(.button):hover {
    color: var(--color-link-inline-hover);
  }

  /* ── 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);
  }

  .overview-page category-tag:hover:not([active]),
  .overview-page category-tag:focus-visible:not([active]) {
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .overview-page category-tag[active] {
    background-color: #2b79d1;
    box-shadow: 0 10px 24px rgba(10, 18, 30, 0.42);
  }

  .overview-page category-tag[active]:hover,
  .overview-page category-tag[active]:focus-visible {
    background-color: #3685df;
    box-shadow: 0 12px 28px rgba(10, 18, 30, 0.5);
  }

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

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

  .highlight,
  .highlight .w,
  .highlight table pre,
  .highlight pre,
  .highlight code {
    color: #d7dee8;
    background-color: #161b22;
  }

  .highlight .k,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt,
  .highlight .kv {
    color: #ff7b72;
  }

  .highlight .kc,
  .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx,
  .highlight .sb,
  .highlight .bp,
  .highlight .ne,
  .highlight .nl,
  .highlight .py,
  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm,
  .highlight .o, .highlight .ow,
  .highlight .gh,
  .highlight .gu {
    color: #79c0ff;
  }

  .highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
    color: #a5d6ff;
  }

  .highlight .nd,
  .highlight .nf, .highlight .fm {
    color: #d2a8ff;
  }

  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs,
  .highlight .gl,
  .highlight .gt {
    color: #8f9bab;
  }

  .highlight .ni,
  .highlight .si,
  .highlight .ge,
  .highlight .gs,
  .highlight .na,
  .highlight .nt,
  .highlight .nb,
  .highlight .nc,
  .highlight .no,
  .highlight .nn,
  .highlight .sr,
  .highlight .gi {
    color: #d7dee8;
  }

  .highlight .gd {
    color: #d7dee8;
    background-color: #3a1a1d;
  }

  .highlight .gi {
    background-color: #163122;
  }

  .highlight .err {
    color: #d7dee8;
    background-color: #5a1f24;
  }

}