/* =========================================================
   Buttons
   ========================================================= */
.mz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-5);
  font: 600 var(--t-sm)/1 var(--ff-ui);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.mz-btn--primary { background: var(--brand); color: #fff; }
.mz-btn--primary:hover { background: var(--brand-ink); border-bottom-color: transparent; }
.mz-btn--secondary { background: transparent; color: var(--ink-1); border-color: var(--ink-1); }
.mz-btn--secondary:hover { background: var(--ink-1); color: var(--paper); border-bottom-color: var(--ink-1); }
.mz-btn--ghost { background: transparent; color: var(--ink-1); border-color: var(--border-strong); }
.mz-btn--ghost:hover { border-color: var(--ink-1); }
.mz-btn--sm { height: 32px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.mz-btn svg { width: 14px; height: 14px; }