.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1-75); height: var(--control-h); padding: 0 var(--sp-4-5); border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--text-control); font-weight: var(--w-semibold); line-height: 1; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface-hover); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-hover); }
.btn--danger { background: var(--danger); color: var(--on-accent); }
.btn--inverse { background: var(--surface); color: var(--text); }
.btn--inverse:hover { background: var(--surface-hover); }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-3-25); font-size: var(--text-sm); border-radius: var(--r-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--sp-5-5); font-size: var(--text-body); }
.btn--block { width: 100%; }
.btn:disabled, .btn.is-disabled { background: var(--skeleton); color: var(--text-3); border-color: transparent; cursor: not-allowed; }

.icon-btn { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: var(--r-md); color: var(--text-2); transition: background var(--dur) var(--ease); }
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn--bordered { border: 1px solid var(--border); background: var(--surface); }
.icon-btn--primary { background: var(--primary); color: var(--on-primary); }
.icon-btn--primary:hover { background: var(--primary-hover); }
.icon-btn--lg { width: var(--tap); height: var(--tap); }

/* Buttons rendered as links keep button colours (core.css colours plain links) */
a.btn--secondary, a.btn--secondary:hover, a.btn--inverse, a.btn--inverse:hover { color: var(--text); }
a.btn--ghost, a.btn--ghost:hover, a.icon-btn, a.icon-btn:hover { color: var(--text-2); }
a.btn--primary, a.btn--primary:hover, a.icon-btn--primary, a.icon-btn--primary:hover { color: var(--on-primary); }