/* button — primary (magenta CTA, r6) + secondary (outline). Measured: 8×12, 14px/500. */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--text-small); font-weight: 500;
  border: 1px solid transparent; cursor: pointer; background: transparent; color: var(--color-foreground);
  transition: background-color 150ms ease, transform 120ms ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--secondary { border-color: var(--color-border); color: var(--color-muted-foreground); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--block { width: 100%; justify-content: center; }
.btn--danger { background: var(--status-distress); color: var(--color-inverse); }
.btn--danger:hover { filter: brightness(1.05); }
.btn--save { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn--loading { opacity: 0.7; pointer-events: none; }
.btn--ghost { color: var(--color-muted-foreground); }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--success { background: var(--status-fine); color: var(--color-inverse); }
.btn--warning { background: var(--status-help); color: var(--color-inverse); }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-eyebrow); }
.btn--lg { padding: var(--space-3) var(--space-5); font-size: var(--text-body); }
.btn--pill { border-radius: var(--radius-pill); }
.btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }