/* Minimal Pulse theme-toggle styles for static HTML (no Svelte shell). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--border-subtle, transparent);
  border-radius: var(--radius, 6px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--sans, system-ui, sans-serif);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.theme-toggle {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.global-header-tool-btn.theme-toggle {
  min-width: 2rem;
}

.theme-toggle-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-icon.theme-icon-light {
  fill: currentColor;
  stroke: none;
}

[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }

/* When following OS (no data-theme), hide moon under light preference. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-icon-dark { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-icon-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .btn {
    transition: none;
  }
}