/* Botão de tema: mostra o sol no escuro (vai para o claro) e a lua no claro */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lavagem);
  color: var(--giz);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--aco-claro);
  transition: background-color 160ms, transform 160ms var(--ease-out);
}

.theme-toggle:hover {
  background: var(--lavagem-forte);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__moon,
[data-theme='light'] .theme-toggle__sun {
  display: none;
}

[data-theme='light'] .theme-toggle__moon {
  display: block;
}

/* Ícones desenhados em SVG com cor fixa: no claro, o traço inverte */
[data-theme='light'] .faq__item summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23101114' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
}

/* A troca de tema abre em círculo; o JS anima o recorte da página nova */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 2;
}

/* No claro, o cartão coberto do programa só esmaece: escurecer branco vira cinza sujo */
.motion[data-theme='light'] .stack__card {
  filter: brightness(calc(1 - var(--cover, 0) * 0.08));
  opacity: calc(1 - var(--cover, 0) * 0.35);
}