body[data-theme="dark"] {
  --bg: #101827;
  --surface: #172033;
  --surface-strong: #102f34;
  --text: #f8fafc;
  --muted: #a8b3c4;
  --line: #2a3a52;
  --primary: #2dd4bf;
  --primary-strong: #5eead4;
  --accent: #fb923c;
  --accent-soft: #332216;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .bottom-nav,
body[data-theme="dark"] .sidebar {
  background: rgba(16, 24, 39, 0.9);
}

body[data-theme="dark"] .hero-panel {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(15, 23, 42, 0.95));
}

body[data-theme="dark"] .progress-bar {
  background: #26344c;
}

body[data-theme="dark"] .form-example,
body[data-theme="dark"] .example-list li,
body[data-theme="dark"] .focus-panel,
body[data-theme="dark"] .audio-panel {
  background: var(--surface-strong);
}

body[data-theme="paper"] {
  --bg: #f8f5ee;
  --surface: #fffdf8;
  --surface-strong: #f1f8f5;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e4ddd0;
}