/* ============================================================
   Botões reutilizáveis
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background var(--transition-base),
    transform var(--transition-fast);
  text-decoration: none;
  border: 2px solid transparent;
  min-height: 40px;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
}

/* Remove o flash escuro padrão do iOS Safari ao tocar em botões */
.btn,
.btn-voltar,
.topbar__area,
.topbar__hamburger,
.chip,
.target-card .btn--target {
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
/* Hover usa azul claro (#0066c2) em vez de --color-primary-dark
   porque várias seções (.como-funciona, .hub-hero, .validation-banner)
   também usam --color-primary-dark como fundo — sem contraste, o
   botão sumia visualmente sobre o fundo da seção em hover. */
.btn--primary:hover {
  background: #0066c2;
  color: var(--color-white);
}

.btn--accent {
  background: var(--color-accent-text); /* laranja escuro AA-compliant (white text >= 4.5:1) */
  color: var(--color-white);
}
.btn--accent:hover {
  background: #8a3600; /* mais escuro que default para realçar no hover (mantém AA) */
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--lg {
  font-size: var(--font-size-base);
  padding: var(--space-4) var(--space-7);
  min-height: 48px;
}

.btn--block {
  width: 100%;
}