/* Shared primitives use the canonical tokens in styles.css. Load after it. */
.mz-btn {
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 15px/1.3 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.mz-btn--primary { color: var(--color-surface); background: var(--color-primary); border: 1px solid var(--color-primary); }
.mz-btn--primary:hover { background: var(--color-primary-hover); }
.mz-btn--secondary { color: var(--color-primary-dark); background: var(--color-surface); border: 1px solid var(--color-primary); }
.mz-btn--accent { color: var(--color-primary-dark); background: var(--color-accent); border: 1px solid var(--color-accent); }
.mz-icon-btn { width: 44px; height: 44px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-border); }
.mz-btn:focus-visible, .mz-icon-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mz-btn { transition: none; } }