/* One button vocabulary for every screen; one primary action per view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs); min-height: 44px; padding: 12px 24px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.btn-primary { background: var(--primary); color: var(--bg); }
.btn-primary:hover { background: var(--primary-deep); color: var(--bg); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); }