:root {
  --color-canvas: #f3f5f2;
  --color-ink: #1f2522;
  --color-primary: #b7d94c;
  --color-secondary: #4967d6;
  --color-attention: #f16c5b;

  --color-surface: color-mix(in srgb, var(--color-canvas) 45%, white);
  --color-surface-raised: color-mix(in srgb, var(--color-canvas) 18%, white);
  --color-muted: color-mix(in srgb, var(--color-ink) 72%, transparent);
  --color-border: color-mix(in srgb, var(--color-ink) 13%, transparent);
  --color-cell: color-mix(in srgb, var(--color-ink) 7%, transparent);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 24%, transparent);
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 82%, var(--color-ink));
  --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 14%, transparent);
  --color-attention-soft: color-mix(in srgb, var(--color-attention) 13%, transparent);
  --color-attention-strong: color-mix(in srgb, var(--color-attention) 82%, var(--color-ink));
  --color-grid: color-mix(in srgb, var(--color-ink) 3.5%, transparent);
  --color-overlay: color-mix(in srgb, var(--color-ink) 54%, transparent);

  --shadow-soft: 0 20px 55px color-mix(in srgb, var(--color-ink) 10%, transparent);
  --shadow-raised: 0 30px 70px color-mix(in srgb, var(--color-ink) 13%, transparent);
}