/* ═══ 7. BUTTONS — the state-emphasis ladder ═════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: transparent;
  letter-spacing: .2px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { background: var(--hover-bg); border-color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn.active, .btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.active:hover, .btn.primary:hover { background: var(--fg); }
.btn.destructive { color: var(--bad-text); border-color: var(--bad-text); }
.btn.destructive:hover { background: var(--bad); color: var(--on-status-fg); border-color: var(--bad); }
.btn.sm { padding: 3px 10px; font-size: var(--text-sm); }
.btn.toggle { text-transform: none; }
.btn.icon-btn { padding: 2px 9px; font-size: var(--text-lg); line-height: 1; }
.btn:disabled {
  border-color: var(--line); color: var(--ink-faint);
  cursor: default; background: transparent; transform: none;
}