/* ==========================================================================
   TOGGLE DE TEMA (claro ⇄ escuro) — CÍRCULO PREMIUM + ICON MORPH
   ---
   O site tem DUAS folhas de tema completas: `styles.css` (escuro, padrão) e
   `styles-light.css` (claro). O botão alterna qual delas está ativa (atributo
   `media` dos <link>) e guarda a escolha em localStorage (`rk-theme`).
   ---
   Visual: botão circular discreto (mesma família do `.mobile-menu-toggle` e
   do `.lang-switch`) com DOIS ícones empilhados. A troca de tema é um MORPH
   100% CSS via `[data-theme]` no <html>: o ícone atual sai girando 90° com
   fade + scale(0.4) e o próximo entra girando na MESMA direção (escuro→claro
   = horário; claro→escuro = anti-horário) — sensação de peça girando, com a
   easing assinatura da página. NENHUMA mudança de JS é necessária.
   ---
   Arquivo carregado DEPOIS das folhas de tema. Usa tokens comuns aos dois
   temas (`--text-secondary`, `--text-primary`) + cores próprias por tema via
   `[data-theme='light']` (as mesmas do `.lang-switch` de cada folha) — por
   isso não é preciso mexer em `styles.css` nem em `styles-light.css`.
   ========================================================================== */

/* ---------- Tokens (base = tema escuro; override = tema claro) ------------- */
.theme-toggle {
  --tg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tg-bg: hsla(231, 50%, 15%, 0.3);
  --tg-bg-hover: hsla(231, 50%, 25%, 0.4);
  --tg-border: rgba(255, 255, 255, 0.15);
  --tg-border-hover: rgba(255, 255, 255, 0.3);
  --tg-glow: 0 0 0 3px hsla(227, 58%, 65%, 0.14);
  --tg-inner: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  --tg-focus: hsl(252, 90%, 74%);
  --tg-color: var(--text-secondary);
  --tg-color-hover: var(--text-primary);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tg-border);
  border-radius: 50%;
  background-color: var(--tg-bg);
  box-shadow: var(--tg-inner);
  color: var(--tg-color);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 0.3s var(--tg-ease),
    border-color 0.3s var(--tg-ease),
    box-shadow 0.3s var(--tg-ease),
    color 0.3s var(--tg-ease),
    transform 0.15s ease-out;
}

[data-theme='light'] .theme-toggle {
  --tg-bg: hsla(0, 0%, 100%, 0.5);
  --tg-bg-hover: rgba(4, 11, 48, 0.07);
  --tg-border: rgba(4, 11, 48, 0.2);
  --tg-border-hover: rgba(4, 11, 48, 0.35);
  --tg-glow: 0 0 0 3px hsla(227, 58%, 44%, 0.12);
  --tg-inner: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  --tg-focus: #31008e;
}

/* ---------- Tamanho (40px — par do .lang-switch-button no header) ---------- */
.theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
}

/* ---------- Ícones empilhados — o morph ------------------------------------ */
.theme-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition:
    opacity 0.45s var(--tg-ease),
    transform 0.45s var(--tg-ease);
}

/* Estado escuro (padrão): sol visível; lua espera a -90° para entrar */
.theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

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

/* Estado claro: sol sai girando +90°; lua entra reta (ida = horário, volta =
   anti-horário — os DOIS ícones sempre giram no mesmo sentido por troca) */
[data-theme='light'] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

[data-theme='light'] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------- Hover (só em ponteiros de verdade — evita hover grudado em touch) */
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background-color: var(--tg-bg-hover);
    border-color: var(--tg-border-hover);
    box-shadow: var(--tg-inner), var(--tg-glow);
    color: var(--tg-color-hover);
  }
}

/* ---------- Press: feedback de clique (micro escala, sem "pular") ---------- */
.theme-toggle:active {
  transform: scale(0.92);
}

/* ---------- Foco visível (teclado) ---------------------------------------- */
.theme-toggle:focus-visible {
  outline: 2px solid var(--tg-focus);
  outline-offset: 2px;
}

/* ---------- Acessibilidade: sem movimento para quem prefere ---------------- */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg {
    transition: none;
  }
}