/* ═══════════════════════════════════════════════════════════
   themeToggle.css — Dark / Light mode toggle button
   ═══════════════════════════════════════════════════════════ */

.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-medium);
  background: var(--color-accent-dim);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s var(--ease-out-back);
  overflow: hidden;
}

.theme-toggle:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  transform: scale(1.1);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out-back);
}

/* Dark mode: show sun, hide moon */
.theme-toggle__sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Light mode: show moon, hide sun */
[data-theme="light"] .theme-toggle__sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Light mode button styling */
[data-theme="light"] .theme-toggle {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05);
  color: var(--color-text-secondary);
}

[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.2);
  color: var(--color-text-primary);
}