:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-dive: cubic-bezier(.7, 0, .25, 1);

  /* dark: deep navy, close to the book's navy theme */
  --bg: #080d1c;
  --bg-2: #0c1428;
  --surface: #111b35;
  --surface-2: #16223f;
  --surface-hover: #1b2a4d;
  --line: #24345c;
  --line-soft: #1a274a;
  --text: #e6ecfb;
  --text-2: #a8b5d6;
  --text-3: #7180a6;
  --accent: #4cc2ff;
  --accent-ink: #04121f;
  --focus: #9ad9ff;
  --grid-dot: rgba(120, 150, 220, .13);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px rgba(76, 194, 255, .5), 0 0 28px rgba(76, 194, 255, .22);

  --added: #4ade80;
  --added-soft: rgba(74, 222, 128, .14);
  --removed: #fb7185;
  --removed-soft: rgba(251, 113, 133, .12);
  --changed: #fbbf24;
  --changed-soft: rgba(251, 191, 36, .13);

  /* element kind families */
  --k-tree: #7aa2ff;
  --k-sum: #f5b85c;
  --k-count: #6ee7a8;
  --k-countsum: #5ad4d4;
  --k-indexed: #c4a1ff;
  --k-opaque: #ff8fc7;
  --k-item: #c3cde6;
  --k-sumitem: #f3d38a;
  --k-ref: #67d9f5;
  --flag: #ff9f6b;
}

:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-2: #eaeef7;
  --surface: #ffffff;
  --surface-2: #f6f8fd;
  --surface-hover: #eef3ff;
  --line: #cfd8ec;
  --line-soft: #e1e7f4;
  --text: #0f1a33;
  --text-2: #42506f;
  --text-3: #6b7896;
  --accent: #0072c6;
  --accent-ink: #ffffff;
  --focus: #0072c6;
  --grid-dot: rgba(40, 70, 140, .13);
  --shadow: 0 10px 28px rgba(28, 45, 90, .14);
  --glow: 0 0 0 1px rgba(0, 114, 198, .55), 0 0 24px rgba(0, 114, 198, .18);

  --added: #15803d;
  --added-soft: rgba(21, 128, 61, .10);
  --removed: #be123c;
  --removed-soft: rgba(190, 18, 60, .08);
  --changed: #a16207;
  --changed-soft: rgba(161, 98, 7, .10);

  --k-tree: #2f5fd6;
  --k-sum: #b86a00;
  --k-count: #11804a;
  --k-countsum: #0b7d83;
  --k-indexed: #7440c9;
  --k-opaque: #c0237d;
  --k-item: #55617d;
  --k-sumitem: #8f6a0c;
  --k-ref: #0a7fa3;
  --flag: #c2521a;
}