:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --panel: #ffffff;
  --border: #d8e0ea;
  --text: #0f172a;
  --muted: #526178;
  --faint: #7a8799;
  --accent: #0284c7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

.global-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--border, #1f2937) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #0b1220) 88%, transparent);
  color: var(--text, #e5e7eb);
  box-shadow: 0 16px 42px rgba(2, 8, 23, 0.22);
  cursor: pointer;
  backdrop-filter: blur(16px);
}

.global-theme-toggle:hover {
  transform: translateY(-2px);
}

.global-theme-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #38bdf8) 45%, transparent);
  outline-offset: 3px;
}

.global-theme-toggle svg {
  width: 21px;
  height: 21px;
}

@media (max-width: 640px) {
  .global-theme-toggle {
    right: 14px;
    bottom: 14px;
  }
}