/* ============================================================
   BOTÕES — sistema de dois estilos
   Todos os botões usam a classe base .btn + um modificador
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* ── Primário — gradiente dourado + brilho ── */
.btn--primary {
  /* Gradiente vertical: topo mais claro, base mais escura (profundidade metálica) */
  background: linear-gradient(180deg, var(--color-gold-300) 0%, var(--color-gold-400) 100%);
  border-color: var(--color-gold-400);
  color: var(--color-text-on-gold);

  /* Halo externo discreto + highlight no topo + sombra interna na base
     (a inset escura em âmbar dá volume metálico ao botão; o halo só cresce no hover) */
  box-shadow:
    0 4px 16px rgba(var(--color-gold-400-rgb), .22),
    0 0 0 1px rgba(var(--color-gold-400-rgb), .1),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -3px 8px rgba(var(--color-gold-600-rgb), .4);
}

.btn--primary:hover {
  background: linear-gradient(180deg, var(--color-gold-200) 0%, var(--color-gold-300) 100%);
  border-color: var(--color-gold-300);
  color: var(--color-text-on-gold);

  /* Halo expandido no hover — mantém a sombra interna na base */
  box-shadow:
    0 8px 40px rgba(var(--color-gold-400-rgb), .6),
    0 0 22px rgba(var(--color-gold-400-rgb), .4),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -3px 8px rgba(var(--color-gold-600-rgb), .35);
}

.btn--primary:active {
  background: linear-gradient(180deg, var(--color-gold-400) 0%, var(--color-gold-500) 100%);
  border-color: var(--color-gold-500);
  box-shadow:
    0 2px 10px rgba(var(--color-gold-400-rgb), .3),
    inset 0 1px 2px rgba(0, 0, 0, .2);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: rgba(var(--color-gold-400-rgb), .4);
  border-color: rgba(var(--color-gold-400-rgb), .4);
  color: rgba(11, 14, 26, .5);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Ghost — borda dourada ── */
.btn--ghost {
  background: transparent;
  border-color: rgba(var(--color-gold-400-rgb), .5);
  color: var(--color-gold-400);
}

.btn--ghost:hover {
  background: var(--color-surface-gold);
  border-color: var(--color-border-gold-strong);
  color: var(--color-gold-200);
}

.btn--ghost:active {
  background: rgba(var(--color-gold-400-rgb), .14);
  border-color: var(--color-gold-400);
  color: var(--color-gold-100);
}

.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
  border-color: rgba(var(--color-gold-400-rgb), .2);
  color: rgba(var(--color-gold-400-rgb), .3);
  cursor: not-allowed;
  pointer-events: none;
}