/* The theme toggle (views/partials/theme-toggle.ejs). Loaded by
   partials/theme-head.ejs on every page, so it must not depend on
   styles.css. Every page that renders it loads design-tokens.css or defines
   the same tokens inline (the token pages do). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--color-accent);
  background: var(--color-surface);
  outline: none;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.theme-toggle .theme-icon-dark,
.theme-toggle .theme-icon-light {
  display: none;
  line-height: 0;
}

/* Dark (default): offer the moon; light: offer the sun. */
.theme-toggle .theme-icon-dark { display: flex; }
[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: flex; }

/* Pages with no header: pin it top right, clear of the iPhone notch. */
.theme-toggle-floating {
  position: fixed;
  top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
  z-index: 1000;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

/* The navy bars — the site header and the settings topbar in light mode, the
   draft header in both — carry the sidebar's foreground tokens, not the page's,
   or the button vanishes against them the moment the theme is light. */
.header .theme-toggle,
.draft-header .theme-toggle,
.settings-topbar .theme-toggle {
  color: var(--sidebar-text);
}

.header .theme-toggle:hover,
.header .theme-toggle:focus-visible,
.draft-header .theme-toggle:hover,
.draft-header .theme-toggle:focus-visible,
.settings-topbar .theme-toggle:hover,
.settings-topbar .theme-toggle:focus-visible {
  color: var(--sidebar-text-active);
  background: none;
}