:root {
  --bg: #f7f8fc;
  --surface: #fff;
  --surface-2: #f1f3f9;
  --text: #172033;
  --muted: #68738a;
  --border: #e7eaf1;
  --primary: #0078d4;
  --success: #159570;
  --danger: #dc5b70;
  --sidebar: #15182b;
}
body {
  background: var(--bg);
  color: var(--text);
}
.site-header,
.feature-card,
.price-card,
.report-window,
.theme-toggle,
.language-toggle {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.logo-strip,
.workflow {
  background: var(--surface-2);
  border-color: var(--border);
}
.app-window {
  background: var(--surface-2);
  border-color: var(--surface);
}
.app-window aside,
.nav-cta {
  background: var(--sidebar);
}
.metrics > div,
.chart-card,
.due-card,
.mini-invoice,
.floating-card,
.report-values > div,
.report-top button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.report-table,
.report-table > div,
.price-card li,
.steps li {
  border-color: var(--border);
}
.report-table > div:first-child,
.card-head small {
  background: var(--surface-2);
  color: var(--muted);
}
.hero-text,
.trust,
.section-heading > p:last-child,
.workflow-copy > p:not(.eyebrow),
.control-copy > p:not(.eyebrow),
.feature-card p,
.steps p,
.footer-top p,
.price-card > p:not(.price-label) {
  color: var(--muted);
}
body[data-theme="dark"] {
  --bg: #111321;
  --surface: #191c2c;
  --surface-2: #24283a;
  --text: #f4f5fa;
  --muted: #a4abc0;
  --border: #2c3145;
  --sidebar: #10121e;
}
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .feature-card,
body[data-theme="dark"] .price-card,
body[data-theme="dark"] .report-window,
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .language-toggle {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="dark"] .logo-strip,
body[data-theme="dark"] .workflow {
  background: var(--surface-2);
  border-color: var(--border);
}
body[data-theme="dark"] .feature-card.featured {
  background: var(--surface);
}
body[data-theme="dark"] .app-window {
  border-color: var(--surface-2);
  background: var(--surface-2);
}
body[data-theme="dark"] .metrics > div,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .due-card,
body[data-theme="dark"] .mini-invoice,
body[data-theme="dark"] .floating-card,
body[data-theme="dark"] .report-values > div,
body[data-theme="dark"] .report-top button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="dark"] .report-table > div:first-child,
body[data-theme="dark"] .card-head small {
  background: var(--surface-2);
  color: var(--muted);
}
body[data-theme="dark"] .report-table > div {
  border-color: var(--border);
}