/**
 * components/buttons.css
 *
 * Boutons et liens-boutons. Le jaune mangue est réservé à l'action
 * principale (design-system.md 2.2) — un seul .btn--primary par écran.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  background-color: var(--color-bg-surface-raised);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Action principale — jaune mangue */
.btn--primary {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-on-accent);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-accent-yellow-hover);
}

/* Feedback d'envoi (jamais de spinner générique) */
@keyframes btn-loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.btn.is-loading {
  animation: btn-loading-pulse 1.2s var(--ease-standard) infinite;
  pointer-events: none;
}

/* Action secondaire — contour discret */
.btn--ghost {
  border: 1px solid var(--color-border-visible);
  color: var(--color-text-primary);
  background-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-bg-surface);
  border-color: var(--color-text-muted);
}