/* Project chrome, card elevation and the Canvas dot pattern. */
:root {
  --surface-page: #f8f7f5;
  --surface-card: #fffefd;
  --surface-field: #eeeeec;
  --surface-hover: #e4e4e2;
  --surface-selected: #e7e7e5;
  --surface-recessed: #f3f3f1;
  --surface-line: #d7d7d4;
  --surface-muted: #565653;
  --surface-focus: #61615e;
  --surface-shadow: 0 8px 20px rgb(34 34 34 / 6%), 0 1px 3px rgb(34 34 34 / 3%);
  --surface-shadow-raised: 0 14px 32px rgb(34 34 34 / 12%), 0 2px 6px rgb(34 34 34 / 5%);
  --surface-shadow-low: 0 3px 10px rgb(34 34 34 / 7%);
  --canvas-dot: #c6c6c3;
  --canvas-grid: radial-gradient(var(--canvas-dot) .75px, transparent .9px);
  --canvas-grid-size: 20px 20px;
}