/* Família em TECLA FÍSICA (founder, 2026-09-25: "A"): parede de 3 px embaixo, sobe 1 px no
   hover, afunda 3 px no clique, fica segurada enquanto carrega. O componente emite
   `aurora-btn` em toda variante menos glass. A receita (matéria e sombras por estado) mora
   nos tokens da TECLA FÍSICA em `tokens.css`; aqui fica só o mapa papel × estado → token.
   Desenho: docs/plans/2026-09-25-botoes-tecla.md.

   Precedência por ESPECIFICIDADE, nunca por ordem de carga: no build, esta folha carrega
   ANTES de `aurora.css` e `index.css`; no dev, depois.
   - Repouso, (0,3,0): vence o legado `.btn-*`, que chega a (0,2,0).
   - Tinta (primário e ação) no hover, no clique, travada e segurada, (0,5,0): vence
     `[data-t="light"] .btn-action.btn-primary:hover` (aurora.css), que chega a (0,4,0).
   - Placa e ghost no hover e no clique, (0,4,0), com `:where()`: ficam ABAIXO do
     `AuroraMenu` (0,5,0), que reusa o AuroraButton como gatilho de seleção. */
.aurora-btn.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 36px; border: 0; border-radius: var(--rad-tecla); padding: var(--sp-2) var(--sp-4);
  font: 500 var(--fs-body-sm)/1.2 var(--ff-sans); text-align: center;
  transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease), transform var(--dur-2) var(--spring);
}
/* Sem feixe nem halo dourado: a vida da tecla é a luz na aresta. */
.aurora-btn.btn::before, .aurora-btn.btn::after { content: none; }
/* Ação = a tecla maior da tela. Slim = a tecla pequena, rótulo mono (meta ≥ 11 px) numa linha
   só: sem espaço, o contêiner empilha a tecla inteira em vez de partir "VER / TUDO". */
.aurora-btn.btn.btn-action { min-height: 40px; padding: 0 var(--sp-5); font: 600 var(--fs-body)/1.2 var(--ff-sans); }
.aurora-btn.btn.btn-slim {
  min-height: 28px; padding: 0 var(--sp-3); white-space: nowrap;
  font: 600 var(--fs-meta)/1.2 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase;
}
/* Ação e slim não encolhem abaixo do rótulo: o `.btn` legado tem `overflow: hidden`, e item
   flex com overflow encolhe até cortar o texto. `:where` deixa o piso em (0,2,0), então regra
   de modal ou página que fixa largura (decisão: 128 px) vence sem empate. Fora do piso:
   gatilho do AuroraMenu, que corta o valor com reticências de propósito. */
.aurora-btn.btn:where(.btn-action, .btn-slim) { min-width: min-content; }

/* ── TINTA · primário e ação. A ação é retroiluminada também parada. ── */
.aurora-btn.btn.btn-primary { background: var(--tecla-face); color: var(--tecla-contra); box-shadow: var(--sh-tecla); }
.aurora-btn.btn.btn-primary.btn-action { box-shadow: var(--sh-tecla-acesa); }
.aurora-btn.btn.btn-primary:hover:not(:disabled) {
  background: var(--tecla-face); color: var(--tecla-contra); transform: translateY(-1px); box-shadow: var(--sh-tecla-alta);
}
.aurora-btn.btn.btn-primary:active:not(:disabled) {
  background: var(--tecla-face-funda); transform: translateY(3px); transition-duration: var(--dur-1); box-shadow: var(--sh-tecla-funda);
}

/* ── PLACA · secundário, perigo e slim. O ghost não tem volume parado: a placa emerge no hover. ── */
.aurora-btn.btn:is(.btn-secondary, .btn-dng, .btn-slim) { background: var(--placa-face); color: var(--ink-2); box-shadow: var(--sh-placa); }
.aurora-btn.btn.btn-dng { color: var(--err-text); }
.aurora-btn.btn.btn-ghost { background: transparent; color: var(--ink-3); box-shadow: var(--sh-tecla-rente); }
.aurora-btn.btn:is(.btn-secondary, .btn-ghost, .btn-slim):hover:where(:not(:disabled)) {
  background: var(--placa-face); color: var(--ink-1); transform: translateY(-1px); box-shadow: var(--sh-placa-alta);
}
/* Perigo acende em erro, não em luz. O texto firma 16% de tinta: sem isso, o escuro mede 4,40:1. */
.aurora-btn.btn.btn-dng:hover:where(:not(:disabled)) {
  background: linear-gradient(var(--err-soft), var(--err-soft)), var(--placa-face);
  color: color-mix(in srgb, var(--err-text) 84%, var(--ink-1)); transform: translateY(-1px); box-shadow: var(--sh-placa-perigo);
}
.aurora-btn.btn:is(.btn-secondary, .btn-ghost, .btn-dng, .btn-slim):active:where(:not(:disabled)) {
  background: var(--placa-face-funda); transform: translateY(3px); transition-duration: var(--dur-1); box-shadow: var(--sh-placa-funda);
}

/* ── INDISPONÍVEL · tecla travada: sem parede, sem luz. O segundo seletor sobe a tinta a
   (0,5,0): sem ele, a ação parada (0,4,0) e o hover legado do primário venceriam. ── */
.aurora-btn.btn:disabled:where(:not([aria-busy="true"])),
.aurora-btn.btn.btn-primary:disabled:not([aria-busy="true"]) {
  background: var(--tecla-trava); color: var(--ink-4); transform: none; cursor: not-allowed; box-shadow: var(--sh-tecla-trava);
}
/* ── CARREGANDO · tecla segurada: afundada enquanto processa, texto legível (nada de opacidade). ── */
.aurora-btn.btn[aria-busy="true"]:disabled {
  background: var(--placa-face-funda); transform: translateY(3px); cursor: progress; box-shadow: var(--sh-placa-funda);
}
.aurora-btn.btn.btn-primary[aria-busy="true"]:disabled {
  background: var(--tecla-face-funda); color: var(--tecla-contra); box-shadow: var(--sh-tecla-segura);
}

/* Foco: anel de prata a 3 px, que embaixo encosta na parede como um aro (o aprovado na
   prévia). Nunca de luz: a luz sobre branco mede ~2,4:1. */
.aurora-btn.btn:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }
@media (pointer: coarse) {
  .aurora-btn.btn, .aurora-btn.btn:is(.btn-action, .btn-slim) { min-height: var(--touch-target-min); }
}
/* Movimento reduzido: sem transição e sem subir no hover. O afundar do clique fica (é a
   confirmação do clique); por isso o `:not(:active)`. */
@media (prefers-reduced-motion: reduce) {
  .aurora-btn.btn { transition: none; }
  .aurora-btn.btn.btn-primary:hover:not(:disabled):not(:active),
  .aurora-btn.btn:is(.btn-secondary, .btn-ghost, .btn-dng, .btn-slim):hover:where(:not(:disabled)):not(:active) { transform: none; }
}