/* ============================================================
   components/dark-mode-toggle.css  —  ds-mode-toggle button
   Used by the visitor-facing dark mode toggle in the public nav.
   ============================================================ */

.ds-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-full, 9999px);
  border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.18));
  background: var(--ds-surface-2, #f8fafc);
  color: var(--ds-text-muted, #475569);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.ds-mode-toggle:hover {
  background: color-mix(in srgb, var(--ds-accent, #2563eb) 8%, var(--ds-surface-2, #f8fafc) 92%);
  border-color: color-mix(in srgb, var(--ds-accent, #2563eb) 30%, var(--ds-border) 70%);
  color: var(--ds-accent, #2563eb);
}

.ds-mode-toggle:focus-visible {
  outline: 2px solid var(--ds-accent, #2563eb);
  outline-offset: 2px;
}

/* Icon visibility — show moon in light mode, sun in dark mode */
.ds-mode-toggle__moon { display: inline; }
.ds-mode-toggle__sun  { display: none; }

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-mode-toggle__moon { display: none; }
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-mode-toggle__sun  { display: inline; }

/* Dark mode: invert toggle button colours */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-mode-toggle {
  background: color-mix(in srgb, var(--ds-surface, rgba(8,12,20,0.94)) 70%, var(--ds-surface-2) 30%);
  color: var(--ds-text-muted);
  border-color: var(--ds-border);
}