/* O botão do produto: um lugar só.
   ---------------------------------------------------------------------------
   O parecer de 18/08/2026 apontou que o botão estava "escrito três vezes em três
   arquivos". A medição de 19/08 achou pior: **treze páginas** declaravam `.btn`
   por conta própria, e o mesmo componente tinha 5 paddings, 4 tamanhos de
   fonte, 4 alturas mínimas, 2 raios, 2 pesos e 5 cores de fundo diferentes. O
   parecer só viu três porque o bundle enviado à crítica tinha seis páginas.

   Não é preciosismo de organização: componente repetido não diverge de uma vez,
   diverge um pouquinho por página, e o produto vai parecendo dois. Foi assim que
   `rotina/` acabou com botão de 14,72px, abaixo do piso de 12 e fora da escala.

   AS TRÊS FAMÍLIAS, porque nem toda diferença é defeito:
     1. FERRAMENTA: retangular (`--r-m`), Inter 700, o porte pelo alvo de toque.
        É o botão que a pessoa aperta no meio de uma dinâmica.
     2. SITE: pílula (`--r-total`), Space Grotesk 500. É o botão do institucional
        (home e sobre), e a diferença é deliberada: ali ele é convite, não ação.
     3. O que sobrar disso é dívida, e tem teto medido em
        `testes/design-system.teste.js`.

   O PORTE VEM DO PARECER, não de gosto: 44 auxiliar, 54 dentro de jogo, 58 ação
   principal; os três tokens de toque que já existiam e ninguém usava.

   Cor: só os tokens semânticos. `--btn-fundo` inverte de papel entre os temas, e
   é por isso que ninguém pinta botão com `--primaria` na mão. */

/* --- Base: o que é igual em todas as famílias -------------------------- */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  border-radius: var(--r-m);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;                    /* piso do parecer; nada em rem decimal */
  line-height: 1.2;
  min-height: var(--toque-min);       /* 44: o mínimo absoluto (RNF-051) */
  padding: 0 var(--e-5);
  text-decoration: none;              /* o mesmo estilo serve para <a> */
  transition: background var(--t-medio) var(--mola),
              filter var(--t-rapido),
              transform var(--t-rapido) var(--mola);
}
.btn:active { transform: scale(.98); }
/* `display:flex` do botão vencia o `[hidden]` do navegador: um botão escondido
   continuava na tela. Achado na Roleta em 05/09; mora aqui para ninguém repetir. */
.btn[hidden] { display: none; }

/* O anel de foco é o global do design system. Página nenhuma desenha o seu:
   ver o cabeçalho de `design-system.css`. */

/* Botão desabilitado precisa PARECER desabilitado sem sumir: `opacity` apaga
   ícone e borda junto e derruba o contraste do rótulo abaixo de qualquer
   mínimo. Por isso a cor é nomeada (`--texto-4` existe só para isto). */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--fundo-3);
  color: var(--texto-4);
  cursor: not-allowed;
  transform: none;
}

/* --- Porte: pelo alvo de toque, não pelo olho -------------------------- */
.btn-jogo { min-height: var(--toque-jogo); }   /* 54: dentro de uma dinâmica */
.btn-acao { min-height: var(--toque-acao); }   /* 58: a ação principal da tela */
.btn-bloco { width: 100%; }                    /* ocupa a largura do bloco */

/* --- Cor: só token semântico ------------------------------------------ */
.btn-primario { background: var(--btn-fundo); color: var(--btn-texto); }
.btn-primario:hover { background: var(--btn-fundo-hover); }

.btn-secundario {
  background: transparent;
  color: var(--texto-2);
  border: 1px solid var(--borda-forte);
}
.btn-secundario:hover { border-color: var(--secundaria); color: var(--texto); }

/* Destrutivo: um dos três papéis que a regra do coral permite. O rótulo é
   `--acento`, não `--acento-claro`: no tema claro `--acento-claro` é cor de
   gráfico, não de texto; 3,75:1 sobre `--fundo` (QA de 05/09).
   `--acento` passa nas seis superfícies: 4,95 / 5,18 / 4,61 no claro e
   6,79 / 6,08 / 5,48 no escuro (fundo, cartão, flutuante). */
.btn-perigo {
  background: transparent;
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent);
}
.btn-perigo:hover { background: var(--acento); color: var(--fundo); }

/* Confirmação de algo concluído: Kudos e Descompressão usam. */
.btn-sucesso { background: var(--sucesso); color: var(--fundo); }
.btn-sucesso:hover { filter: brightness(1.06); }

/* --- Família 2: o botão do site institucional -------------------------- */
.btn-pilula {
  border-radius: var(--r-total);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  padding: var(--e-4) var(--e-6);
}