/* Theme toggle button */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.theme-toggle svg { width: 20px; height: 20px; }

/* The icon shows the mode you'll switch TO (an affordance, not the current state):
   light mode shows the MOON (click -> go dark); dark mode shows the SUN (click -> go light). */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun  { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }