/* Match Baux app/globals.css: Neutral Dark. Loaded after layout styles. */
:root {
  color-scheme: dark;
  --bg: #17181c;
  --bg-panel: #1b1d22;
  --bg-card: #1e2026;
  --bg-hover: #24262c;
  --bg-rail: #131418;
  --border: #2e3138;
  --text: #e8eaef;
  --text-muted: #9aa1b0;
  --accent: #8ab4f8;
  --accent-hover: #a8c7fa;
  --accent-fg: #101114;
  --success: #7fbf9a;
  /* Compatibility with the original site's layout and component tokens. */
  --ink: var(--text);
  --ink-soft: var(--text-muted);
  --paper: var(--bg);
  --paper-deep: var(--bg-panel);
  --lime: var(--accent);
  --green: var(--success);
  --purple: var(--accent);
  --line: var(--border);
  --dark-line: var(--border);
}

body, .hero, .trust-section, .guide-hero {
  color: var(--text);
  background: var(--bg);
}
.site-header {
  color: var(--text);
  background: rgb(23 24 28 / 96%);
  border-color: var(--border);
}
.advantage-section, .workspace-section, .guide-cta {
  color: var(--text);
  background: var(--bg-panel);
}
footer, .guide-footer {
  color: var(--text-muted);
  background: var(--bg-rail);
  border-color: var(--border);
}
.guide-hero { border-color: var(--border); }
.advantage-card.featured, .stats-console, .product-capture {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
}
.stat-cards > div, .chart-card, .ranking-card {
  background: var(--bg-panel);
  border-color: var(--border);
}
.topic-card:hover, .updates-section .topic-card:hover {
  background: var(--bg-hover);
}
.site-header nav, .hero-lede, .hero-stats dd,
.section-heading p, .section-heading.light p,
.flow-card p, .flow-line, .advantage-card p,
.workspace-copy > p, .usage-copy > p, .usage-copy .privacy-note,
.topic-card p, .faq-intro > p, .faq-list p, .latest-section p,
.trust-grid p, .final-cta p, .terminal-line,
.stats-topline, .chart-head, .stat-cards small,
.ranking-card span, .ranking-card small, .product-capture figcaption,
.breadcrumbs, .guide-kicker, .guide-deck, .guide-meta, .guide-label,
.guide-section-heading > p, .guide-copy > p,
.component-grid p, .decision-grid p, .comparison-table td,
.guide-faq p, .guide-cta p, .guide-links a {
  color: var(--text-muted);
}
.section-heading.light h2, .button-quiet, .workspace-copy ul,
.comparison-table td:first-child { color: var(--text); }
.topic-number, .faq-list summary::after, .stat-cards span,
.breadcrumbs a, .guide-hero h1 em, .guide-meta i,
.component-grid span, .decision-grid span, .guide-list li::before,
.guide-faq summary::after, .guide-links a:hover {
  color: var(--accent);
}
.button { border-color: var(--border); }
.button-primary {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}
.button-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.button-quiet:hover, .button-ink:hover {
  color: var(--accent-hover);
  background: var(--bg-hover);
  border-color: var(--accent);
}
.button-ink { color: var(--text); border-color: var(--border); }
::selection { color: var(--accent-fg); background: var(--accent); }
.signal, .guide-kicker::before {
  background: var(--success);
  box-shadow: none;
}
.signal-purple { background: var(--accent); }
.signal-amber { background: var(--amber); }
.tool-row span {
  color: var(--text-muted);
  background: var(--bg-hover);
}
.role-tag, .patterns-graphic span.active {
  color: var(--accent);
  background: #26314a;
  border-color: var(--border);
}
.record-icon, .permissions-graphic span {
  color: var(--success);
  border-color: var(--border);
}
.permissions-graphic strong, .patterns-graphic span {
  color: var(--text-muted);
  border-color: var(--border);
}
.cost-graphic span, .ring small { color: var(--text-muted); }
.ring {
  background: radial-gradient(circle at center, var(--bg-card) 55%, transparent 57%),
    conic-gradient(var(--accent) 0 38%, var(--border) 38%);
}
.stats-console { box-shadow: 0 24px 64px #00000030; }
.stats-topline, .bar-chart { border-color: var(--border); }
.bar-chart i { background: var(--accent); }
.terminal-line i { background: var(--text-muted); }
.faq-list, .guide-faq { border-top-color: var(--border); }
.guide-definition { border-top-color: var(--accent); }
.comparison-table th { color: var(--text); background: var(--bg-rail); }