:root, :root[data-theme="dark"] {
  --bg: #0a0b0d;
  --bg-raised: #14171b;
  --bg-inset: #101317;
  --fg: #f2f4f6;
  --fg-mute: #9aa3ad;
  --fg-faint: #5c646d;
  --accent: #7FBA13;
  --accent-hover: #8FC91F;
  --accent-fg: #0a0b0d;
  --border: rgba(242, 244, 246, 0.10);
  --grid-line: rgba(242, 244, 246, 0.08);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --bg: #f7f8f6;
  --bg-raised: #ffffff;
  --bg-inset: #eef0ec;
  --fg: #171b22;
  --fg-mute: #515966;
  --fg-faint: #8a919b;
  --accent: #4F7A0A;
  --accent-hover: #56820A;
  --accent-fg: #ffffff;
  --border: rgba(23, 27, 34, 0.12);
  --grid-line: rgba(23, 27, 34, 0.06);
  --shadow: 0 8px 28px rgba(23, 27, 34, 0.10);
}


.h-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  color: var(--fg-mute);
  transition: color 0.2s ease;
}
.h-theme-toggle:hover { color: var(--fg); }
.h-theme-toggle .lucide { width: 16px; height: 16px; }
.h-theme-toggle .lucide-moon { display: none; }
:root[data-theme="light"] .h-theme-toggle .lucide-sun { display: none; }
:root[data-theme="light"] .h-theme-toggle .lucide-moon { display: block; }