/* ======================================================================
   DESIGN TOKENS
   Start here for palette, type, page scale, and global signal intensity.
   ====================================================================== */
:root {
  color-scheme: dark;
  --bg: #090909;
  --ink: #f7f9fc;
  --muted: rgba(232, 237, 247, .56);
  --quiet: rgba(232, 237, 247, .34);
  --ghost: rgba(232, 237, 247, .16);
  --hairline: rgba(255, 255, 255, .055);

  --context: #5c7fe3;
  --project: #9254f4;
  --evidence: #39d9cf;
  --people: #d9ae69;
  --activity: #f04e72;
  --history: #7bd6a4;
  --answer: #caff4d;
  --query: #f7fbff;
  --registrar: #f7fbff;

  --page-max: 1760px;
  --header-gap: 30px;
  --ease: cubic-bezier(.2, .75, .2, 1);

  /* High-level animation emphasis knobs. Particle size and frequency live
     beside the other motion controls in scripts/config.js. */
  --signal-active-opacity: .94;
  --active-route-opacity: .30;
  --active-route-width: .88;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 31%, rgba(57, 217, 207, .048), transparent 27%),
    radial-gradient(circle at 48% 34%, rgba(146, 84, 244, .038), transparent 28%),
    radial-gradient(circle at 82% 50%, rgba(202, 255, 77, .026), transparent 25%),
    radial-gradient(circle at 32% 78%, rgba(240, 78, 114, .026), transparent 24%),
    var(--bg);
}