/* ============================================================================
   SUBPÁGINA NA PELE DA INSTÂNCIA (spec 026 · P2, 04/10/2026)

   `evolucao.css` e `onepager.css` nasceram com tokens próprios e fixos (--ink,
   --brand, --soft…), no roxo de origem. Esta folha entra DEPOIS delas e religa
   cada token ao papel equivalente da pele que o `tema.js` aplica no <html>. A
   reserva de cada `var()` é o valor de origem: sem pele, a página fica como era.

   `--muted` não aparece aqui de propósito: a pele já manda um token com esse
   nome, e o inline do <html> vence o `:root` das duas folhas.
   ========================================================================== */
:root {
  --ink: var(--txt, #161326);
  --ink-2: var(--viz-neutro-txt, #4b465f);
  --brand: var(--tinta, #6d28d9);
  --brand-2: var(--tinta-media, #7c3aed);
  --grid: var(--viz-grade, #e8e5f4);
  --ring: var(--vidro-borda, rgba(35,20,80,.12));
  --soft: color-mix(in srgb, var(--lavanda, #e9e3f8) 38%, #fff);
  --soft-2: color-mix(in srgb, var(--lavanda, #e9e3f8) 64%, #fff);
  --card-shadow: 0 1px 2px rgba(var(--tinta-rgb, 22,19,38), .05), 0 16px 40px -24px rgba(var(--tinta-rgb, 91,33,182), .28);
}

/* O que as duas folhas pintam com hex direto, sem passar por token. */
.abas button[aria-selected="true"],
.convite { background: var(--acao-fundo, var(--tinta, linear-gradient(118deg, #5b21b6, #6d28d9 48%, #4f46e5))); }
.convite .orbi { background: radial-gradient(circle at 35% 35%, #fff 0 12%, var(--viz-neutro, #c4b5fd) 30%, var(--tinta-media, #7c3aed) 70%); }
.chip.repeticao, .chip.reformulacao { background: color-mix(in srgb, var(--tinta-media, #6366f1) 14%, #fff); color: var(--tinta, #3730a3); }
.comparacao div.v2 { background: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta-media, #7c3aed) 28%, #fff); }
.comoentra, .regras-novas { background: var(--campo, #0f0d17); color: var(--papel, #e9e5ff); }

/* One-pager: a mesa atrás da folha e a sombra da folha. Só na tela: a
   impressão já zera o fundo, e esta regra é mais específica que a dela. */
@media screen {
  :root:has(.folha), :root:has(.folha) body { background: color-mix(in srgb, var(--lavanda, #dcd6f1) 30%, #fff); }
  .folha { box-shadow: var(--card-shadow); }
}