/* website-dev/assets/css/dark-theme.css — shared dark-theme tokens + component
   overrides for the site-wide dark rebuild (2026-08-25, following the
   index.html hero rebuild).

   HOW TO USE ON A PAGE:
   1. Link this file in <head>, AFTER the page's own <style> block and AFTER
      assets/css/site-footer.css, e.g.:
        </style>
        <link rel="stylesheet" href="assets/css/site-footer.css">
        <link rel="stylesheet" href="assets/css/dark-theme.css">
      (features/ pages: href="../assets/css/dark-theme.css")
      Load order matters — later wins the cascade for equal-specificity
      selectors, and this file is designed to load last.
   2. DELETE the page's own local `:root { ... }` block (it defines the OLD
      light values under the same custom-property names — leaving it in
      just wastes bytes since this file's :root always wins by load order,
      but removing it keeps the page's source honest about which theme it's
      actually rendering).
   3. Hunt for hardcoded hex colors in the page's OWN <style> block (colors
      not written as var(--something)) — those do NOT flip automatically.
      Common offenders seen across this site: #F8FAFD (table header bg),
      #EEF2F8 (old footer/panel bg), #E2E7F0 (old border), #9098AC / #565F78
      / #10162B (ink shades used directly instead of var(--ink-faint) /
      var(--ink-dim) / var(--ink)), #A8721C (badge text). Replace with the
      matching dark token below, or a purpose-built override added to this
      file if the same hardcoded value recurs across many pages.

   Dark palette mirrors index.html's rebuild exactly, so brand/hero pages and
   feature/DNA pages read as one consistent system rather than two palettes
   glued together. */

:root {
  --bg:        #0B0E1A;
  --panel:     #151B2E;
  --panel-2:   #1B2238;
  --ink:       #F3F6FB;
  --ink-dim:   #AEB6CC;
  --ink-faint: #7A8299;
  --line:      rgba(255,255,255,0.10);
  --blue:      #5B8CFF;
  --violet:    #A276F5;
  --magenta:   #E070F0;
  --gold:      #E8A93A;
  --white:     #FFFFFF;
  --grad-brand: linear-gradient(100deg, #4E7CFF 0%, #9B5CF0 100%);
  /* Legacy alias some older pages reference directly instead of --panel. */
  --panel-dark: #151B2E;
  --panel-line: rgba(255,255,255,0.10);
}

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

/* ── Nav ─────────────────────────────────────────────────────────────── */
nav {
  background: rgba(11, 14, 26, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-links a.active { color: #BFD0FF; }
.btn-download {
  color: var(--white);
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad-brand) border-box;
}

/* ── Common feature-page shell (fd-header / fd-body / fd-section, tables,
     cards, strips, CTA band) — shared by the DNA feature pages. ─────────── */
.eyebrow { color: #B9C6FF; border-bottom-color: var(--violet); }
.crumb { color: var(--ink-faint); }
.crumb a { color: #9DB6FF; }

.fd-header h1 { color: var(--white); }
.fd-header h1 .ver { color: var(--ink-faint); }
.fd-header .lede { color: var(--ink-dim); }

.fd-body p { color: var(--ink-dim); }
.fd-body strong { color: var(--white); }
.fd-body a { color: #9DB6FF; }

.fd-section h2 { color: var(--white); }
.fd-section .hint { color: var(--ink-dim); }
.fd-section a { color: #9DB6FF; }

.tbl-wrap { background: var(--panel); border-color: var(--line); }
.dna-tbl th { background: var(--panel-2); color: var(--ink-faint); border-bottom-color: var(--line); }
.dna-tbl td { color: var(--ink-dim); border-bottom-color: var(--line); }
.dna-tbl .fmt, .dna-tbl .key { color: var(--white); }

.use-card, .related a, .fold-card, .why-card, .toolkit-card, .paper-card {
  background: var(--panel); border-color: var(--line);
}
.use-card strong, .related strong, .why-card strong, .toolkit-card strong { color: var(--white); }
.use-card span, .related span, .why-card span, .toolkit-card span { color: var(--ink-dim); }
.related a:hover { border-color: rgba(91,140,255,0.5); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }

.fd-strip { border-top-color: var(--line); }
.fd-strip-item strong { color: var(--white); }
.fd-strip-item span { color: var(--ink-dim); }
.fd-note { color: var(--ink-faint); }

.new-badge {
  background: rgba(232,169,58,0.18); color: #F3C574; border-color: rgba(232,169,58,0.45);
}
.badge { background: rgba(91,140,255,0.16); color: #9DB6FF; border-color: rgba(91,140,255,0.4); }

.fx-cta { background: linear-gradient(100deg, #171F38 0%, #241C3D 100%); }
.fx-cta-text h2 { color: var(--white); }
.fx-cta-text p { color: var(--ink-dim); }
.fx-cta-note { color: var(--ink-faint); }

/* ── DNA directory page (dna.html) ──────────────────────────────────────── */
.hub-header h1 { color: var(--white); }
.hub-header .lede { color: var(--ink-dim); }
.dna-list { border-top-color: var(--line); }
.dna-row { border-bottom-color: var(--line); }
.dna-row:hover { background: rgba(91,140,255,0.08); }
.dna-copy strong { color: var(--white); }
.dna-copy span { color: var(--ink-dim); }
.dna-go { color: #9DB6FF; }

/* ── Footer (same override previously scoped inline on index.html, now
     shared) ──────────────────────────────────────────────────────────── */
.site-footer { margin-top: 0; border-top: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.site-footer-word { color: var(--white); }
.site-footer-tag { color: var(--ink-dim); }
.site-footer-copy { color: var(--ink-faint); }
.site-footer-col h3 { color: var(--ink-faint); }
.site-footer-col a { color: var(--ink-dim); }
.site-footer-col a:hover { color: #9DB6FF; }
.site-footer-col a.is-placeholder { color: var(--ink-faint); }
.site-footer-col a.is-placeholder:hover { color: var(--ink-dim); }
.site-footer-bar { border-top-color: var(--line); color: var(--ink-faint); }
.site-footer-bar a { color: var(--ink-dim); }
.site-footer-bar a:hover { color: #9DB6FF; }