body.dark {
  --bg: #111510;
  --panel: rgba(20,24,18,0.82);
  --panel-strong: #171d16;
  --text: #edf2ea;
  --muted: #b4beb0;
  --border: rgba(237,242,234,0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --overlay: rgba(0,0,0,0.35);
}

body.ultra-dark {
  --bg: #020202;
  --panel: rgba(8, 8, 8, 0.88);
  --panel-strong: #0b0b0b;
  --text: #f2f2ef;
  --muted: #9da39a;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 24px 72px rgba(0,0,0,0.55);
  --overlay: rgba(0,0,0,0.5);
}

.theme-toggle, .button {
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  border-radius: 999px;
  padding: .85rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.theme-toggle {
  min-width: 12ch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
}

.theme-toggle-icon {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  transform-origin: center;
}

.theme-toggle-text {
  display: inline-block;
  min-width: 10ch; /* fits Ultra Dark */
  text-align: left;
}

.theme-toggle-icon.is-changing {
  animation: themeIconSwap 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle-text {
  display: inline-block;
  min-width: 10ch;
  text-align: left;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icon.is-changing {
    animation: none !important;
  }
}

@keyframes themeIconSwap {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.85) rotate(-12deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}