/* ── Theme layer ───────────────────────────────────────────────────────────
   Loaded LAST so it can override the component/syntax sheets that bake in
   light-mode colours. Two jobs:
     1. the header theme-toggle control (visible in both schemes)
     2. the [data-theme="dark"] corrections that custom properties alone
        cannot reach — code blocks, and the baked palette hexes inside the
        hand-authored inline SVG diagrams.
   ------------------------------------------------------------------------ */

/* ── Theme toggle control ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-full);
  color: var(--color-yellow);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.20);
  transform: rotate(-12deg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* One control, two glyphs: show the scheme the click will switch TO. */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle:hover { transition: none; transform: none; }
}

/* ── Dark: code blocks ────────────────────────────────────────────────────── */
:root[data-theme="dark"] code[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"] {
  color: #DCE7F1;
  background: #0B1826;
}
:root[data-theme="dark"] pre[class*="language-"] { background: #0B1826 !important; }
:root[data-theme="dark"] .code-block-wrapper {
  border-color: var(--color-border);
  background: #0B1826;
}
:root[data-theme="dark"] .code-block-wrapper pre[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"]:not(.code-block-wrapper pre) {
  background: #0B1826 !important;
  border-color: var(--color-border);
}
:root[data-theme="dark"] .code-block-header {
  background: #132538;
  border-bottom-color: var(--color-border);
}
:root[data-theme="dark"] .code-lang-label { color: #A9C4DA; }
:root[data-theme="dark"] .copy-btn {
  background: #1B3048;
  border-color: #2E4A66;
  color: #C7DAEA;
}
:root[data-theme="dark"] .copy-btn:hover {
  background: #26415F;
  border-color: #3E6188;
  color: #FFFFFF;
}
:root[data-theme="dark"] pre[class*="language-"]::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] pre[class*="language-"]::-webkit-scrollbar-thumb { background: #375677; }

/* Token colours re-tuned for a dark canvas — every group in syntax.css is
   re-stated here, so no light-mode token colour survives on #0B1826 (all
   ≥ 4.5:1 against it). */
:root[data-theme="dark"] .token.comment,
:root[data-theme="dark"] .token.prolog,
:root[data-theme="dark"] .token.doctype,
:root[data-theme="dark"] .token.cdata        { color: #9DB6CB; }

:root[data-theme="dark"] .token.punctuation  { color: #B4C6D6; }

:root[data-theme="dark"] .token.property,
:root[data-theme="dark"] .token.tag,
:root[data-theme="dark"] .token.boolean,
:root[data-theme="dark"] .token.number,
:root[data-theme="dark"] .token.constant,
:root[data-theme="dark"] .token.symbol,
:root[data-theme="dark"] .token.deleted      { color: #FF9E93; }

:root[data-theme="dark"] .token.selector,
:root[data-theme="dark"] .token.attr-name,
:root[data-theme="dark"] .token.string,
:root[data-theme="dark"] .token.char,
:root[data-theme="dark"] .token.builtin,
:root[data-theme="dark"] .token.inserted     { color: #FFC97A; }

:root[data-theme="dark"] .token.operator,
:root[data-theme="dark"] .token.entity,
:root[data-theme="dark"] .token.url,
:root[data-theme="dark"] .language-css .token.string,
:root[data-theme="dark"] .style .token.string { color: #6FD6BE; }

:root[data-theme="dark"] .token.atrule,
:root[data-theme="dark"] .token.attr-value,
:root[data-theme="dark"] .token.keyword      { color: #FF9E93; }

:root[data-theme="dark"] .token.function,
:root[data-theme="dark"] .token.class-name   { color: #8CC3EC; }

:root[data-theme="dark"] .token.regex,
:root[data-theme="dark"] .token.important,
:root[data-theme="dark"] .token.variable     { color: #E9B87A; }

/* ── Dark: inline-SVG diagram interiors ───────────────────────────────────────
   The diagrams draw structure with currentColor (which follows --color-text
   automatically) and label/accent runs with a small set of BAKED palette
   hexes. Remap exactly those hexes — never invent an off-palette colour, or
   the shape silently stays light-on-dark. Selectors are case-insensitive so
   both #436B8A and #436b8a are caught.                                       */
:root[data-theme="dark"] svg [fill="#436B8A" i] { fill: #A9C4DA; }
:root[data-theme="dark"] svg [stroke="#436B8A" i] { stroke: #A9C4DA; }
:root[data-theme="dark"] svg [fill="#C0392B" i] { fill: #FF9E93; }
:root[data-theme="dark"] svg [stroke="#C0392B" i] { stroke: #FF9E93; }
:root[data-theme="dark"] svg [fill="#EF4444" i],
:root[data-theme="dark"] svg [fill="#E55" i] { fill: #FF9E93; }
:root[data-theme="dark"] svg [stroke="#EF4444" i],
:root[data-theme="dark"] svg [stroke="#E55" i] { stroke: #FF9E93; }
:root[data-theme="dark"] svg [fill="#22C55E" i],
:root[data-theme="dark"] svg [fill="#16A34A" i],
:root[data-theme="dark"] svg [fill="#27AE60" i],
:root[data-theme="dark"] svg [fill="#4A9" i] { fill: #6EE7A8; }
:root[data-theme="dark"] svg [stroke="#22C55E" i],
:root[data-theme="dark"] svg [stroke="#16A34A" i],
:root[data-theme="dark"] svg [stroke="#27AE60" i] { stroke: #6EE7A8; }

/* Full-canvas background rect: every diagram carries one so its labels keep
   contrast against whichever page surface is beneath them. */
:root[data-theme="dark"] svg .svg-canvas { fill: #132538; }
svg .svg-canvas { fill: #FFFFFF; }

/* ── Dark: assorted components whose light values are hard-coded ───────────── */
/* The active nav pill keeps its coral identity but needs a deeper fill for
   white text to stay AA on the darker header. */
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .nav-link.active:hover {
  background: #A8352A;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}
:root[data-theme="dark"] .btn--outline:hover { background: var(--color-ink-blue); color: #0A1523; }
:root[data-theme="dark"] blockquote { color: var(--color-text); }
:root[data-theme="dark"] ::selection { background: var(--color-yellow); color: #0A1523; }
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(0.92); }