/* Both themes share the original amber brand palette. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171410;
  --bg-soft: #221d17;
  --card: #221d17;
  --brand-wash: #332619;
  --ink: #faf9f6;
  --ink-70: #d8cfc2;
  --ink-55: #bfb3a3;
  --ink-35: #ac9d89;
  --line: #473a2a;
}

.theme-toggle {
  display: inline-grid; place-items: center; flex: 0 0 38px;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--brand-wash); border-color: var(--brand); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }

[data-theme="dark"] .nav { background: rgba(23,20,16,.92); }
[data-theme="dark"] :is(.btn-ghost, .chip, .hgrid .hc, .field input, .field select, .field textarea, footer, .qchip) {
  background: var(--bg-soft);
}
[data-theme="dark"] .hgrid .hc.gated { background: var(--brand-wash); }
[data-theme="dark"] .qchip.active { background: var(--ink); color: var(--bg); }
[data-theme="dark"] :is(.rbar .track, .qbar) { background: var(--line); }
[data-theme="dark"] :is(.trans-band, .bcard.spot, .hybrid-spot) {
  background: linear-gradient(135deg, rgba(233,165,45,.14), transparent), var(--card);
}
/* Use the existing gold accent for readable small text against dark surfaces. */
[data-theme="dark"] :is(.eyebrow, .pipe-card .tag, .step .k, .logic-demo .node small, .hgrid .hh, .agent-card .vh .live, .slider-head output, .uc-more) {
  color: var(--brand-glow);
}
[data-theme="dark"] .grad {
  background-image: linear-gradient(100deg, #e9a52d, #bd650c 55%, #e9a52d);
}

@media (max-width: 520px) {
  .nav-inner.wrap { padding-inline: 12px; gap: 8px; }
  .nav-cta { gap: 6px; }
  .nav .brand { font-size: 20px; }
  .nav-cta .btn { padding: 10px; font-size: 12px; }
  .nav-cta .text-link { font-size: 11px; white-space: nowrap; }
  .theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
}