/* ============================================================================
   buttons.css — Reusable button system (IAPrompt #33). Prefixed, opt-in.
   ============================================================================ */
.wa-btn {
  display: inline-flex; align-items: center; gap: var(--wa-space-2);
  padding: 0.5rem 1rem; border-radius: var(--wa-radius); border: none;
  font-size: var(--wa-fs-sm); font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--wa-transition), border-color var(--wa-transition), opacity var(--wa-transition);
}
.wa-btn:disabled { opacity: 0.6; cursor: default; }

.wa-btn--primary { background: var(--wa-blue); color: #fff; }
.wa-btn--primary:hover { background: var(--wa-blue-dark); }
.wa-btn--success { background: var(--wa-green); color: #fff; }
.wa-btn--success:hover { filter: brightness(0.95); }
.wa-btn--danger { background: var(--wa-red); color: #fff; }
.wa-btn--danger:hover { filter: brightness(0.95); }
.wa-btn--outline { background: var(--wa-surface); color: #374151; border: 1.5px solid var(--wa-border); }
.wa-btn--outline:hover { border-color: var(--wa-text-faint); }
.wa-btn--ghost { background: var(--wa-border-soft); color: #374151; }
.wa-btn--ms { background: #0078d4; color: #fff; }

.wa-btn--sm { padding: 0.3rem 0.65rem; font-size: var(--wa-fs-xs); }
.wa-btn--block { width: 100%; justify-content: center; }