:root {
  --paper: #f4f1e9;
  --ink: #282a23;
  --muted: #5f6157;
  --line: #d9d7cb;
  --accent: #aa4705;
  --soft-accent: #f0e1cf;
  --card: #fbfaf5;
  --surface-raised: #eae9e0;
  --surface-muted: #ecebe2;
  --surface-tint: #e9ebde;
  --surface-node: #f7f7ee;
  --surface-outcome: #f2f2e8;
  --input-border: #969b87;
  --strong-line: #a0a68f;
  --button-bg: #282a23;
  --button-text: #f4f1e9;
  --button-hover: #414438;
  --selection: #e8c6a2;
  --selection-text: #282a23;
  --shadow: #3d3d2655;
  --sweep: #aa4705;
  --sweep-text: #fbfaf5;
  --accent-contrast: #fbfaf5;
  --glow: #e08a4a3d;
  --stage: #1d1f1a;
  --stage-line: #3a3e34;
  --stage-ink: #f4f1e9;
  --stage-muted: #aeb1a4;
  --stage-accent: #f0a56b;
  /* Paper grain: dark specks at low opacity. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .16;
  color-scheme: light;
}

/* Any element can carry the dark theme, so the design canvas can show both themes side by side. */
[data-theme="dark"] {
  --paper: #181a17;
  --ink: #f4f1e9;
  --muted: #b3b6a8;
  --line: #3a3e34;
  --accent: #f0a56b;
  --soft-accent: #3b2d21;
  --card: #22251f;
  --surface-raised: #2a2e25;
  --surface-muted: #292c25;
  --surface-tint: #252b22;
  --surface-node: #272b23;
  --surface-outcome: #2c3027;
  --input-border: #626b57;
  --strong-line: #6c7562;
  --button-bg: #f0a56b;
  --button-text: #181a17;
  --button-hover: #ffc38f;
  --selection: #6e4629;
  --selection-text: #f4f1e9;
  --shadow: #00000080;
  --sweep: #ffc38f;
  --sweep-text: #181a17;
  --accent-contrast: #181a17;
  --glow: #f0a56b24;
  --stage: #0f100e;
  --stage-line: #30342b;
  --stage-ink: #f4f1e9;
  --stage-muted: #a6a99b;
  --stage-accent: #f0a56b;
  /* Paper grain: light specks at low opacity. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .07;
  color-scheme: dark;
}