/* Dark theme variable overrides
   html[data-theme="dark"] has specificity 0,1,1 which beats :root (0,1,0)
   so these variables correctly override the inline <style> light-theme values */
html[data-theme="dark"] {
  --cream: #1a1714;
  --bg: #1a1714;
  --ink: #faf7f1;
  --secondary: #d8d1c3;
  --muted: #b3ab9d;
  --accent: #8f2d28;
  --kicker: #b0463f;
  --rule: #2e2a24;
  --blockquote-bg: #221e1a;
  --green: #4a9c4a;
  --green-bg: #1a2e1a;
  --red: #c05050;
  --red-bg: #2e1a1a;
}

html[data-theme="dark"] .nav-dropdown { background: #1a1714; }

/* Wire terracotta accent to heading-type elements in dark mode.
   --kicker (#b0463f) goes on small uppercase section labels and kickers.
   --accent (#8f2d28) is available for decorative use (borders, marks, etc.).
   Main display headings keep --ink so they stay fully legible. */
html[data-theme="dark"] .cv-section-title  { color: var(--kicker); }
html[data-theme="dark"] .cv-skill-label    { color: var(--kicker); }
html[data-theme="dark"] .page-subtitle     { color: var(--kicker); }
html[data-theme="dark"] .course-label      { color: var(--kicker); }
html[data-theme="dark"] .quiz-meta         { color: var(--kicker); }
html[data-theme="dark"] .back-link         { color: var(--kicker); }
html[data-theme="dark"] .back-link:hover   { color: var(--ink); }

/* Ensure nav items are always vertically centred */
nav { align-items: center; }

/* Toggle button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}
#theme-toggle:hover { color: var(--ink); }

/* CSS-driven icon swap — no JS flash */
#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] #theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] #theme-toggle .icon-moon { display: none; }