/*
 * BOTÕES
 * Componente de ação. Variantes: primary (ação principal), secondary
 * (neutra), danger (destrutiva), ghost (discreta). Tamanho sm para uso
 * em linhas de tabela. Consome apenas tokens semânticos — respeita o tema.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary desabilitado: azul apagado dedicado (não opacidade crua) + texto
   suave. Mantém a identidade da ação sinalizando que está inativa. */
.btn--primary:disabled,
.btn--primary[disabled] {
  opacity: 1;
  background-color: var(--color-accent-muted);
  color: var(--color-text-muted);
}

/* Primary — ação principal. */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-accent-text);
}

/* Secondary — ação neutra, sobre superfície com borda. */
.btn--secondary {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}

/* Danger — somente ações destrutivas. */
.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-danger-text);
}

.btn--danger:hover {
  background-color: var(--color-danger-hover);
  color: var(--color-danger-text);
}

/* Ghost — discreta, sem fundo nem borda. Para ações em tabelas. */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
}

.btn--ghost:hover {
  background-color: var(--color-hover);
  color: var(--color-text);
}

/* Tamanho compacto — linhas de tabela, espaços densos. */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* Largura cheia — botões de rodapé de card (ex.: "Ver detalhes"). */
.btn--block {
  width: 100%;
}