body.dark {
  --surface: rgba(12, 28, 28, 0.94);
  --surface-strong: rgba(18, 35, 35, 0.98);
  --surface-tint: rgba(209, 138, 29, 0.12);
  --ink: #f5ecdd;
  --muted: rgba(245, 236, 221, 0.7);
  --border: rgba(209, 138, 29, 0.16);
  --shadow: 0 26px 62px rgba(0, 0, 0, 0.42);
  background:
    radial-gradient(circle at top left, rgba(209, 138, 29, 0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(189, 82, 37, 0.18), transparent 24%),
    linear-gradient(135deg, #081515 0%, #102727 64%, #221414 100%);
}

body.dark .hero,
body.dark .section,
body.dark .hero-copy,
body.dark .project-card,
body.dark .priority-spotlight,
body.dark .context-card,
body.dark .update-card {
  background: var(--surface);
  border-color: var(--border);
}

body.dark .hero {
  background:
    linear-gradient(140deg, rgba(13, 30, 30, 0.94), rgba(16, 39, 39, 0.92)),
    radial-gradient(circle at top right, rgba(209, 138, 29, 0.15), transparent 36%);
}

body.dark .hero-panel {
  background: linear-gradient(180deg, #123230 0%, #173836 54%, #451616 100%);
}

body.dark .ghost-button,
body.dark .meta-pill,
body.dark .meta-block {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
  color: var(--ink);
}

body.dark .primary-button {
  background: linear-gradient(135deg, rgba(209, 138, 29, 0.96), rgba(189, 82, 37, 0.92));
}