/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem; border: none; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }

.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--border-strong); }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--danger-dim); }

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: var(--success-dim); }

.btn-ghost {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent-dim); }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.65rem 1.75rem; font-size: 1rem; }
.btn-icon {
  padding: 0.4rem; border-radius: 50%; min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Touch devices need larger tap targets (iOS HIG 44pt, Material 48dp).
 * Only apply on coarse pointers so desktop keeps the compact look. */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 40px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }
  .btn-icon {
    min-width: 44px; min-height: 44px;
  }
}