/* ═══════════════════════════════════════════════════════════════════
   THEME — light (default, see base.css :root) + dark
   Every surface is driven by custom properties, so [data-theme="dark"]
   flips the page, header, cards, tables, code blocks AND the interiors
   of the hand-authored inline SVG diagrams.
   ═══════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:             #0f172a;
  --c-bg-subtle:      #16233d;
  --c-bg-muted:       #1e293b;
  --c-bg-code:        #1e293b;
  --c-border:         #334155;
  --c-border-strong:  #475569;
  --c-text:           #e2e8f0;
  --c-text-muted:     #cbd5e1;
  --c-text-light:     #94a3b8;
  --c-heading:        #f8fafc;
  --c-primary:        #38bdf8;
  --c-primary-dark:   #7dd3fc;
  --c-secondary:      #a5b4fc;
  --c-secondary-dark: #818cf8;
  --c-accent:         #34d399;
  --c-accent-dark:    #6ee7b7;
  --c-amber:          #fbbf24;
  --c-purple:         #c4b5fd;
  --c-red:            #f87171;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh:    0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 6px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --sh-lg: 0 10px 15px rgba(0,0,0,.55), 0 4px 6px rgba(0,0,0,.4);
  --sh-xl: 0 20px 25px rgba(0,0,0,.6), 0 10px 10px rgba(0,0,0,.35);
}

/* ── Surfaces that carry a literal colour in the light sheet ───────── */
[data-theme="dark"] .site-header      { background: rgba(15,23,42,.97); }
[data-theme="dark"] .hero             { background: linear-gradient(135deg, #0c2b3f 0%, #241f4d 50%, #06392f 100%); }
[data-theme="dark"] .content-intro-box{ background: linear-gradient(135deg, rgba(12,74,110,.45), rgba(49,46,129,.45)); }
[data-theme="dark"] .content-body tr:hover td { background: rgba(56,189,248,.10); }
[data-theme="dark"] .copy-btn.copied  { background: #064e3b; color: #6ee7b7; border-color: #10b981; }
[data-theme="dark"] .faq-item[open] .faq-arrow::after { border-color: #0f172a; }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-accent:hover { color: #0f172a; }
[data-theme="dark"] .btn-secondary:hover { color: #0f172a; }

[data-theme="dark"] .topic-card-icon--blue   { background: #0c4a6e; color: #bae6fd; }
[data-theme="dark"] .topic-card-icon--indigo { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .topic-card-icon--green  { background: #064e3b; color: #a7f3d0; }
[data-theme="dark"] .topic-card-icon--amber  { background: #78350f; color: #fde68a; }

[data-theme="dark"] .badge-blue   { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .badge-indigo { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .badge-green  { background: #064e3b; color: #a7f3d0; }
[data-theme="dark"] .badge-amber  { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge-purple { background: #4c1d95; color: #ddd6fe; }

/* ── Prism syntax tokens ───────────────────────────────────────────── */
[data-theme="dark"] code[class*="language-"],
[data-theme="dark"] pre[class*="language-"]        { color: #e2e8f0; }
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata                   { color: #94a3b8; }
[data-theme="dark"] .token.punctuation             { color: #94a3b8; }
[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted                 { color: #fda4af; }
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number                  { color: #fcd34d; }
[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted                { color: #6ee7b7; }
[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string,
[data-theme="dark"] .token.variable                { color: #7dd3fc; }
[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name              { color: #d8b4fe; }
[data-theme="dark"] .token.keyword                 { color: #93c5fd; }
[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important               { color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════════
   INLINE-SVG DIAGRAM REMAP
   The diagrams are authored against a fixed, baked palette. These
   attribute selectors key on the EXACT authored hex, so every diagram
   interior (canvas, panels, labels, connectors) flips with the theme.
   Never introduce an off-palette hex in a diagram: it would silently
   stay light-on-dark here.
   ═══════════════════════════════════════════════════════════════════ */

/* Surfaces — canvas + panel tints */
[data-theme="dark"] svg [fill="#ffffff"] { fill: #0b1220; }
[data-theme="dark"] svg [fill="#f8fafc"] { fill: #1e293b; }
[data-theme="dark"] svg [fill="#f1f5f9"] { fill: #334155; }
[data-theme="dark"] svg [fill="#f0f9ff"],
[data-theme="dark"] svg [fill="#e0f2fe"] { fill: #0c4a6e; }
[data-theme="dark"] svg [fill="#eef2ff"] { fill: #312e81; }
[data-theme="dark"] svg [fill="#ecfdf5"],
[data-theme="dark"] svg [fill="#dcfce7"] { fill: #064e3b; }
[data-theme="dark"] svg [fill="#fffbeb"],
[data-theme="dark"] svg [fill="#fff7ed"],
[data-theme="dark"] svg [fill="#fef9c3"],
[data-theme="dark"] svg [fill="#fef3c7"] { fill: #713f12; }
[data-theme="dark"] svg [fill="#fef2f2"],
[data-theme="dark"] svg [fill="#fee2e2"] { fill: #7f1d1d; }

/* Label text — dark ink becomes light ink */
[data-theme="dark"] svg [fill="#0f172a"] { fill: #f1f5f9; }
[data-theme="dark"] svg [fill="#1e293b"] { fill: #e2e8f0; }
[data-theme="dark"] svg [fill="#475569"] { fill: #cbd5e1; }
[data-theme="dark"] svg [fill="#64748b"] { fill: #94a3b8; }
[data-theme="dark"] svg [fill="#0369a1"] { fill: #7dd3fc; }
[data-theme="dark"] svg [fill="#4f46e5"] { fill: #a5b4fc; }
[data-theme="dark"] svg [fill="#065f46"],
[data-theme="dark"] svg [fill="#047857"] { fill: #6ee7b7; }
[data-theme="dark"] svg [fill="#059669"] { fill: #34d399; }
[data-theme="dark"] svg [fill="#b45309"],
[data-theme="dark"] svg [fill="#d97706"] { fill: #fcd34d; }
[data-theme="dark"] svg [fill="#b91c1c"],
[data-theme="dark"] svg [fill="#7f1d1d"] { fill: #fca5a5; }

/* Saturated brand/data marks stay saturated but lift for dark contrast */
[data-theme="dark"] svg [fill="#0ea5e9"] { fill: #38bdf8; }
[data-theme="dark"] svg [fill="#6366f1"] { fill: #818cf8; }
[data-theme="dark"] svg [fill="#10b981"] { fill: #34d399; }
[data-theme="dark"] svg [fill="#f59e0b"] { fill: #fbbf24; }
[data-theme="dark"] svg [fill="#ef4444"] { fill: #f87171; }
[data-theme="dark"] svg [fill="#a78bfa"] { fill: #c4b5fd; }

/* Connectors, panel outlines, axes */
[data-theme="dark"] svg [stroke="#e2e8f0"] { stroke: #334155; }
[data-theme="dark"] svg [stroke="#cbd5e1"] { stroke: #475569; }
[data-theme="dark"] svg [stroke="#94a3b8"] { stroke: #64748b; }
[data-theme="dark"] svg [stroke="#475569"] { stroke: #94a3b8; }
[data-theme="dark"] svg [stroke="#0f172a"] { stroke: #e2e8f0; }
[data-theme="dark"] svg [stroke="#0369a1"] { stroke: #38bdf8; }
[data-theme="dark"] svg [stroke="#0ea5e9"] { stroke: #38bdf8; }
[data-theme="dark"] svg [stroke="#6366f1"],
[data-theme="dark"] svg [stroke="#4f46e5"] { stroke: #818cf8; }
[data-theme="dark"] svg [stroke="#059669"],
[data-theme="dark"] svg [stroke="#10b981"] { stroke: #34d399; }
[data-theme="dark"] svg [stroke="#d97706"],
[data-theme="dark"] svg [stroke="#f59e0b"] { stroke: #fbbf24; }
[data-theme="dark"] svg [stroke="#ef4444"] { stroke: #f87171; }
[data-theme="dark"] svg [stroke="#ffffff"] { stroke: #0b1220; }

/* ── Figure chrome (download / full-screen controls) ───────────────── */
.figure {
  margin: var(--sp-6) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  overflow: hidden;
}
.figure > svg,
.figure > .figure-media > svg,
.figure > .figure-media > img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}
.figure-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}
.figure figcaption {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: 1.5;
  min-width: 0;
}
.figure-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.figure-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--c-text-muted);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.figure-btn:hover {
  background: var(--c-bg-muted);
  color: var(--c-primary-dark);
  border-color: var(--c-primary);
}
.figure:fullscreen,
.figure:-webkit-full-screen {
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6);
}
.figure:fullscreen > svg,
.figure:fullscreen > .figure-media > svg { max-height: 85vh; }

/* ── Theme toggle control ──────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-bg);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--c-bg-muted); color: var(--c-primary-dark); border-color: var(--c-primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}