/* ============================================================================
   ATOM · Button
   Variants:  primary | ghost | secondary
   States:    :hover :active :disabled | .btn-loading (compõe com o atom .spin)
   Modifiers: .btn-block (full width)
   Sizes:     default | .btn-nav (compact, used in site header)
   A11y:      pill shape, focus-visible inherits global --focus-ring.
              Disabled buttons set [disabled] (real) — never aria only.
              Loading: sempre [disabled] + aria-busy="true"; o glifo é o atom
              .spin (atoms/indicators.css) como filho — composição, não um
              spinner novo. Par 1:1 da prop `loading` do shadcn ui/button.tsx.
   Snippet:
     <button class="btn btn-primary">Comprar agora</button>
     <button class="btn btn-ghost">Ver modelos</button>
     <button class="btn btn-secondary">Voltar para corrigir</button>
     <button class="btn btn-primary btn-block">＋ Adicionar ao carrinho</button>
     <button class="btn btn-primary btn-nav">Comprar</button>
     <button class="btn btn-primary" disabled>Finalizar compra</button>
     <button class="btn btn-primary btn-loading" disabled aria-busy="true">
       <span class="spin"></span> Processando…
     </button>
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  padding: 16px 30px;
  letter-spacing: .01em;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

/* --- Variant: primary (default action) --- */
/* Texto ESCURO sobre laranja (6.58:1) — branco reprovava AA (2.59:1).
   No active o fundo escurece (700) e o texto vira branco (4.74:1). */
.btn-primary { background: var(--orange-500); color: var(--text-on-brand); }
.btn-primary:hover {
  background: var(--orange-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn-primary:active { transform: scale(.98); background: var(--orange-700); color: var(--text-on-brand-active); }
.btn-primary:disabled {
  background: var(--neutral-700);
  color: var(--neutral-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Variant: ghost (outline on dark) --- */
.btn-ghost { background: transparent; color: var(--neutral-0); border: 2px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--orange-400); color: var(--orange-300); }

/* --- Variant: secondary (raised dark surface) --- */
.btn-secondary { background: var(--neutral-800); color: var(--neutral-0); border: 1.5px solid var(--border-soft); }
.btn-secondary:hover { border-color: var(--orange-400); color: var(--orange-300); }

/* --- State: loading (par da prop `loading` do shadcn) --- */
.btn-loading { pointer-events: none; }
.btn-loading .spin { border-top-color: currentColor; } /* trilho segue o .spin; ponteiro herda a tinta do botão, como no twin React */

/* --- Modifier: full-width --- */
.btn-block { width: 100%; }

/* --- Size: nav-compact (header) --- */
.btn-nav { padding: 11px 22px; font-size: var(--text-sm); }