/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.btn:hover  { background: var(--surface-2); color: var(--text); }
.btn:active { background: #e6e3dd; }

/* icon-only (search, clear buttons) */
.btn-icon { width: 32px; padding: 0; }

/* filled accent — primary action */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.btn-primary:hover  { background: #245079; border-color: #245079; color: #fff; }
.btn-primary:active { background: #1d4166; }

/* tinted accent — secondary accent action */
.btn-accent {
  background: var(--accent-bg);
  border-color: var(--accent-lt);
  color: var(--accent);
}
.btn-accent:hover { background: var(--accent-lt); border-color: var(--accent); }

/* danger */
.btn-danger {
  background: var(--error-bg);
  border-color: var(--error-bd);
  color: var(--error-tx);
}
.btn-danger:hover { background: #fae4e0; border-color: #e8a09a; }

/* size modifier */
.btn-sm { height: 26px; padding: 0 10px; font-size: 10px; }