/* Botões do Figma: .btn--primary e .btn--secondary. Servem para <a> e <button>. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px; /* Figma: 53.91px */
  padding: 6px 24px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

.btn--primary {
  background: var(--azul-marinho-90);
  color: #fff;
  box-shadow: var(--sombra-botao-primario);
}

.btn--secondary {
  background: var(--fundo-botao-secundario);
  border-color: var(--azul-marinho-10);
  color: var(--azul-marinho-90);
  box-shadow: var(--sombra-botao-secundario);
}

/* Versão compacta usada no header (Figma: 44px, texto 16 medium) */
.btn--compact {
  min-height: 44px;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 500;
}

/* Hover só em dispositivos com mouse; pressed em qualquer um */
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--azul-marinho-90-hover);
    box-shadow: var(--sombra-botao-primario-hover);
  }

  .btn--secondary:hover {
    background: var(--fundo-botao-secundario-hover);
    border-color: var(--azul-marinho-20);
  }
}

.btn--primary:active {
  box-shadow: var(--sombra-botao-primario-ativo);
}

.btn--secondary:active {
  background: var(--fundo-botao-secundario-hover);
  box-shadow: var(--sombra-botao-secundario-ativo);
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  @media (hover: hover) {
    .btn--primary:hover {
      transform: translateY(-1px);
    }
  }

  .btn:active {
    transform: translateY(1px);
  }
}