:root {
  --canvas: #f7f5ef;
  --ink: #233347;
  --muted: #55677a;
  --ink-secondary: #405667;
  --ink-body: #4a566d;
  --surface: #fffefb;
  --line: #dedfd8;
  --line-tint: #d4e2d9;
  --line-strong: #b7c3c0;
  --surface-soft: #f2eee5;
  --surface-tint: #eaf2ed;
  --surface-alt: #e8ebe7;
  --surface-alt-hover: #dce5df;
  --progress-idle: #d8d1c4;
  --preview-surface: #f1e8d8;
  --preview-ink: #7d4b16;
  --primary: #126a67;
  --primary-dark: #0d5654;
  --focus: #a64e12;
  --math: #385f9e;
  --math-dark: #2b4a7d;
  --science: #267859;
  --science-dark: #1f634b;
  --programming: #8b4e2c;
  --programming-dark: #6d3b20;
  --button-disabled: #d9d5cd;
  --button-disabled-ink: #435064;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-card: 20px;
  --radius-control: 12px;
  --diagram-outline: #243047;
  --diagram-a: #48698f;
  --diagram-b: #557145;
  --diagram-c: #8b4e2c;
  --diagram-square-a: #547db6;
  --diagram-square-b: #a86475;
  --diagram-square-c: #765eab;
  --diagram-square-a-fill: #8db6e888;
  --diagram-square-b-fill: #e8a7b088;
  --diagram-square-c-fill: #b9a5e888;
  --diagram-proof-triangle: #f3c96b99;
  --diagram-proof-gap: #8db6e855;
  --diagram-proof-line: #5964a6;
  --diagram-incident: #4f72c8;
  --diagram-refracted: #2c8c72;
  --diagram-reflected: #d07a32;
  --diagram-normal: #63718a;
}