:root {
  --paper: #fff6f1;
  --blush: #fbe3da;
  --card: #ffffff;
  --ink: #26102f;
  --muted: #6d5a74;
  --line: #26102f;
  --soft: rgba(38, 16, 47, 0.12);
  --cobalt: #2b36ff;
  --peach: #ff9a62;
  --plum: #8a3ffc;
  --pink: #ff7aa8;
  --sky: #9fd4ff;
  --mint: #bdf2d5;
  --on-dark: #fff6f1;
  --danger: #d7263d;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 0 rgba(38, 16, 47, 0.08), 0 22px 44px -26px rgba(38, 16, 47, 0.45);
  --pool-a: rgba(255, 154, 98, 0.30);
  --pool-b: rgba(43, 54, 255, 0.13);
  --pool-c: rgba(255, 122, 168, 0.20);
  --arc-op: 0.075;
  --tint: #fbe7df;
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
}

:root[data-theme='dark'] {
  --paper: #170a1e;
  --blush: #2a1535;
  --card: #231230;
  --ink: #fbe9e0;
  --muted: #b9a4c2;
  --line: #fbe9e0;
  --soft: rgba(251, 233, 224, 0.16);
  --cobalt: #5a63ff;
  --on-dark: #170a1e;
  --shadow: 0 1px 0 rgba(251, 233, 224, 0.06), 0 24px 48px -26px rgba(0, 0, 0, 0.75);
  --pool-a: rgba(255, 154, 98, 0.12);
  --pool-b: rgba(90, 99, 255, 0.20);
  --pool-c: rgba(255, 122, 168, 0.10);
  --arc-op: 0.06;
  --tint: #22102c;
}

/* topic and residue colour families: --tc background, --tf text on it */
.c-cobalt, .fam-charged { --tc: var(--cobalt); --tf: #fff; }
.c-peach, .fam-polar { --tc: var(--peach); --tf: #26102f; }
.c-plum, .fam-greasy { --tc: var(--plum); --tf: #fff; }
.c-sky { --tc: var(--sky); --tf: #26102f; }
.fam-special { --tc: var(--pink); --tf: #26102f; }