/* ── Design tokens (source of truth: DESIGN.md) ─────────────────────────── */
:root {
  --bg:          oklch(9% 0.016 264);
  --surface:     oklch(16% 0.020 264);
  --surface-2:   oklch(21% 0.022 264);
  --border:      oklch(27% 0.022 264);
  --border-2:    oklch(34% 0.022 264);
  --text:        oklch(93% 0.008 264);
  --text-body:   oklch(72% 0.014 264);
  --text-muted:  oklch(56% 0.016 264);
  --primary:     oklch(58% 0.18 270);
  --primary-dim: oklch(58% 0.18 270 / 0.15);
  --primary-lo:  oklch(58% 0.18 270 / 0.08);
  --primary-hi:  oklch(70% 0.14 270);
  --green:  oklch(67% 0.18 145);
  --amber:  oklch(72% 0.16 75);
  --red:    oklch(62% 0.20 25);
}

body { background: var(--bg); color: var(--text-body); }

[hx-indicator].htmx-request { opacity: .6; }
.ghost-edit { cursor: pointer; }

/* ── Dark component helpers ─────────────────────────────────────────────── */
.surface     { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.surface-2   { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.input-dark  {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; padding: 8px 12px; font-size: 14px; outline: none;
}
.input-dark:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.btn-primary {
  background: var(--primary); color: oklch(96% 0.005 264);
  font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 5px;
  border: none; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  color: var(--text-muted); font-weight: 500; font-size: 14px; padding: 9px 18px;
  border-radius: 5px; border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--border-2); color: var(--text); }
.row-dark { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
.row-dark:hover { border-color: var(--border-2); }

/* Project-hub filters: collapsible on mobile, always-open on desktop. */
.hub-filters > summary { list-style: none; }
.hub-filters > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) {
  .hub-filters > summary { display: none; }
  .hub-filters > form    { display: block !important; }  /* override UA closed-details hiding */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}