/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: .75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-fast),
              color var(--transition-fast);
  min-height: 44px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Sizes ── */
.btn-sm {
  padding: .5rem 1rem;
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
}

.btn-full { width: 100%; }

.btn-icon {
  padding: .6rem;
  min-width: 44px;
  min-height: 44px;
}

/* ── Variants ── */
.btn-primary {
  /* Identidade do tenant (GAM-05): --gradient-btn era um gradiente
     teal→violeta FIXO (--primary-400/--primary-600/--violet-600 nunca são
     sobrescritos por tenant), então botões primários — inclusive "Ver
     catálogo" no dashboard — ignoravam a cor do tenant. --brand-gradient
     é o token injetado por tenant em <style id="tenant-theme"> (ver
     core/theming.py); --gradient-btn some como fallback de 2ª ordem só
     para o raro caso do tema do tenant não ter carregado ainda. */
  background: var(--brand-gradient, var(--gradient-btn, var(--primary)));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover:not(:disabled) {
  /* Redeclara o gradiente aqui (não só em .btn-primary): a regra legada
     .btn-primary:hover{background:var(--navy-light)} em app.css tem
     especificidade maior (classe+pseudo-classe) que o .btn-primary base
     deste arquivo, e venceria mesmo carregando antes — achatando o
     gradiente para uma cor sólida sempre que o botão fosse hover. */
  background: var(--brand-gradient, var(--gradient-btn, var(--primary)));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--gray-light);
  color: var(--dark);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  background: #dfe4e8;
  box-shadow: var(--shadow-md);
}

.btn-success {
  background: var(--success);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-success:hover:not(:disabled) {
  background: #229954;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-danger:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover:not(:disabled) {
  background: var(--primary-lighter);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--primary-lighter);
}

/* Gold/achievement CTA (replaces old .btn-gold) */
.btn-gold {
  background: linear-gradient(135deg, #f1c40f, #e67e22);
  color: var(--dark);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-md);
}
.btn-gold:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Compatibility: apply base .btn props when used without the .btn base class ── */
.btn-primary:not(.btn),
.btn-secondary:not(.btn),
.btn-gold:not(.btn),
.btn-success:not(.btn),
.btn-danger:not(.btn),
.btn-outline:not(.btn),
.btn-view:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: .65rem 1.25rem;
  min-height: 40px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}