/* ── Dark mode variables ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg:     #0f0f0e;
  --white:  #1a1a19;
  --border: #2a2a28;
  --bm:     #3a3a37;
  --text:   #f0f0ee;
  --mid:    #a0a09a;
  --muted:  #666662;
  --dim:    #444440;
  --blue:   #5b7ff0;
  --bl:     #1a2240;
  --bm2:    #2a3560;
  --green:  #2ea86a;
  --gl:     #0e2a1a;
  --shadow: 0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
}

/* Respect system preference if no manual override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:     #0f0f0e;
    --white:  #1a1a19;
    --border: #2a2a28;
    --bm:     #3a3a37;
    --text:   #f0f0ee;
    --mid:    #a0a09a;
    --muted:  #666662;
    --dim:    #444440;
    --blue:   #5b7ff0;
    --bl:     #1a2240;
    --bm2:    #2a3560;
    --green:  #2ea86a;
    --gl:     #0e2a1a;
    --shadow: 0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
  }
}

/* ── Toggle button ──────────────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  transition: all 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--white);
  color: var(--text);
  border-color: var(--bm);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Show moon in light mode, sun in dark mode */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
}