:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;
  --accent: #58a6ff;
  --accent2: #56d4c2;
  --text: #e6edf3;
  --muted: #9ba7b4;
  /* Aliases used by bob-demo-sdlc-cards.html */
  --card-bg: #161b22;
  --text-primary: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted: #9ba7b4;
}

:root[data-theme="dark"] img.logo-img,
:root[data-theme="dark"] .logo-image img {
  filter: invert(1) hue-rotate(180deg);
}

/* Fix hardcoded black text inside tinted boxes when in dark mode */
:root[data-theme="dark"] .stage-tip,
:root[data-theme="dark"] .stage-note,
:root[data-theme="dark"] .stage-prep,
:root[data-theme="dark"] .setup-note,
:root[data-theme="dark"] .source-note,
:root[data-theme="dark"] .tip,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .metric-desc,
:root[data-theme="dark"] .metric-name,
:root[data-theme="dark"] .output-list,
:root[data-theme="dark"] .output-item,
:root[data-theme="dark"] .kv-key,
:root[data-theme="dark"] .kv-val,
:root[data-theme="dark"] .cf-layer-desc,
:root[data-theme="dark"] .stage-tip *:not(.tip-label):not(strong),
:root[data-theme="dark"] .stage-note *:not(.note-label):not(strong),
:root[data-theme="dark"] .setup-note *:not(strong),
:root[data-theme="dark"] .tip *:not(strong),
:root[data-theme="dark"] .stage-prep *:not(strong),
:root[data-theme="dark"] .source-note *:not(strong),
:root[data-theme="dark"] .meta span {
  color: var(--text) !important;
}

/* Tip/note label colors should keep their accent hue */
:root[data-theme="dark"] .tip-label {
  color: #ffa657 !important;
}
:root[data-theme="dark"] .note-label {
  color: var(--accent2) !important;
}

/* bob-demo-sdlc-cards.html specific: subtitle pill and white capabilities bar */
:root[data-theme="dark"] .header .subtitle {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .capabilities-bar {
  background: var(--surface) !important;
}

/* Decision tree SVG — flip light fills to dark surfaces in dark mode */
:root[data-theme="dark"] .tree-svg .node-question rect {
  fill: var(--surface2) !important;
}
:root[data-theme="dark"] .tree-svg .node-start ellipse {
  fill: #3a2f14 !important;
}
:root[data-theme="dark"] .tree-svg .node-outcome.green rect {
  fill: #12332a !important;
}
:root[data-theme="dark"] .tree-svg .node-outcome.blue rect {
  fill: #13253d !important;
}
:root[data-theme="dark"] .tree-svg .node-outcome.orange rect {
  fill: #3a2317 !important;
}

/* Inline SVG text with hardcoded dark/muted fills — flip to light in dark mode */
:root[data-theme="dark"] svg text[fill="#333"],
:root[data-theme="dark"] svg text[fill="#555"],
:root[data-theme="dark"] svg text[fill="#424242"],
:root[data-theme="dark"] svg text[fill="#666"],
:root[data-theme="dark"] svg text[fill="#000"],
:root[data-theme="dark"] svg text[fill="#000000"] {
  fill: var(--text) !important;
}
:root[data-theme="dark"] svg text[fill="#6c757d"],
:root[data-theme="dark"] svg text[fill="#999"],
:root[data-theme="dark"] svg text[fill="#9e9e9e"] {
  fill: var(--muted) !important;
}

/* Inline SVG rect/path with near-white fills — flip to dark surfaces */
:root[data-theme="dark"] svg rect[fill="#f5f5f5"],
:root[data-theme="dark"] svg rect[fill="#fafafa"],
:root[data-theme="dark"] svg rect[fill="#fff"],
:root[data-theme="dark"] svg rect[fill="#ffffff"] {
  fill: var(--surface2) !important;
}
:root[data-theme="dark"] svg rect[fill="#fef9ef"],
:root[data-theme="dark"] svg rect[fill="#fff8e1"],
:root[data-theme="dark"] svg rect[fill="#fff3e0"],
:root[data-theme="dark"] svg rect[fill="#fafaf5"] {
  fill: #2e2614 !important;
}
:root[data-theme="dark"] svg rect[fill="#e0f2f1"],
:root[data-theme="dark"] svg rect[fill="#e8f5e9"],
:root[data-theme="dark"] svg rect[fill="#f1f8e9"] {
  fill: #12332a !important;
}
:root[data-theme="dark"] svg rect[fill="#ede7f6"] {
  fill: #231942 !important;
}
:root[data-theme="dark"] svg rect[fill="#f0f6ff"],
:root[data-theme="dark"] svg rect[fill="#e3f2fd"],
:root[data-theme="dark"] svg rect[fill="#f8f9fa"] {
  fill: #13253d !important;
}

/* Dark-colored SVG text on now-dark rects — brighten */
:root[data-theme="dark"] svg text[fill="#33691e"],
:root[data-theme="dark"] svg text[fill="#2e7d32"] {
  fill: #7cb342 !important;
}
:root[data-theme="dark"] svg text[fill="#0d47a1"] {
  fill: #58a6ff !important;
}
:root[data-theme="dark"] svg text[fill="#4a148c"] {
  fill: #b39ddb !important;
}
:root[data-theme="dark"] svg text[fill="#e65100"],
:root[data-theme="dark"] svg text[fill="#f57f17"] {
  fill: #ffa657 !important;
}
:root[data-theme="dark"] svg text[fill="#00695c"] {
  fill: #56d4c2 !important;
}

/* Default (visited) link color in dark mode — replace browser purple */
:root[data-theme="dark"] a:link,
:root[data-theme="dark"] a:visited {
  color: var(--accent);
}

/* Prompt cards and other hardcoded dark text elements */
:root[data-theme="dark"] .prompt-body,
:root[data-theme="dark"] .prompt-body * {
  color: var(--text) !important;
}

/* Override inline style="color: #000000" (used in some tip/note divs) */
:root[data-theme="dark"] [style*="#000000"],
:root[data-theme="dark"] [style*="#000"] {
  color: var(--text) !important;
}

.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}