/* ===== Design tokens ===== */
:root {
  --bg-base: #121212;
  --bg-base-solid: #000000;
  --bg-highlight: #1a1a1a;
  --bg-card: #181818;
  --bg-card-hover: #282828;
  --bg-menu: #282828;
  --bg-elevated-hi: #2a2a2a;
  --text-subdued: #b3b3b3;
  --text-bright-accent: #fff;
  --essential-bright: #fff;
  --green: #1ed760;
  --green-dark: #169c46;
  --border-soft: hsla(0, 0%, 100%, .07);
  --scrollbar-thumb: hsla(0, 0%, 100%, .18);

  --font-stack: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 500px;

  --ease-momentum: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 420ms;

  --topbar-h: 64px;
  --np-bar-h: 84px;
  --sidebar-nav-w: 214px;
  --sidebar-lib-w: 282px;
  --gutter-x: 24px;
}

/* thin-stroke display accent — private territory */
.display-kicker {
  font-weight: 250;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--text-subdued);
}

@media (max-width: 900px) {
  :root { --gutter-x: 16px; }
}