/*
 * theme-toggle.css - Theme Toggle Button
 * ========================================
 * PORQUÊ: O botão de tema tem transições específicas (sun/moon swap)
 * que são complexas o bastante para justificar isolamento.
 * Depende de `html.light` toggleado pelo ThemeToggle.js.
 */

.theme-toggle {
 width: 34px;
 height: 34px;
 background: transparent;
 border: 1px solid var(--border);
 border-radius: 7px;
 color: var(--muted);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.15s;
 position: relative;
 overflow: hidden;
}

.theme-toggle:hover {
 border-color: var(--border-glow);
 color: var(--white);
 background: var(--red-glow);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
 position: absolute;
 transition: opacity 0.25s ease, transform 0.3s ease;
}

/* Dark mode (default): show moon, hide sun */
.theme-toggle .icon-sun {
 opacity: 0;
 transform: rotate(90deg) scale(0.6);
}

.theme-toggle .icon-moon {
 opacity: 1;
 transform: rotate(0deg) scale(1);
}

/* Light mode: show sun, hide moon */
html.light .theme-toggle .icon-sun {
 opacity: 1;
 transform: rotate(0deg) scale(1);
}

html.light .theme-toggle .icon-moon {
 opacity: 0;
 transform: rotate(-90deg) scale(0.6);
}