:root {
  /* Named color values */
  --lch-black: 20% 0 0;
  --lch-white: 100% 0 0;
  --lch-beige: 98% 0.0076 61;
  --lch-beige-dark: 95% 0.0165 71;
  --lch-wood-light: 87% 0.0316 67;
  --lch-wood-medium: 72% 0.0381 59;
  --lch-wood-dark: 43% 0.04 57;
  --lch-gray-light: 96% 0.005 96;
  --lch-gray: 92% 0.005 96;
  --lch-gray-dark: 85% 0.005 96;
  --lch-blue: 54% 0.15 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 50.5% 0.213 27.518;
  --lch-green: 52.7% 0.154 150.069;
  --lch-green-light: 77% 0.1535 163;
  --lch-always-black: 0% 0 0;
  --lch-always-white: 100% 0 0;
  --lch-yellow: 92.62% 0.1 91.5;

  /* Abstractions */
  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-green));
  --color-positive-light: oklch(var(--lch-green-light));
  --color-bg: oklch(var(--lch-beige));
  --color-surface: oklch(var(--lch-beige-dark));
  --color-ink: oklch(var(--lch-wood-dark));
  --color-ink-reversed: oklch(var(--lch-white));
  --color-link: oklch(var(--lch-green));
  --color-subtle-light: oklch(var(--lch-gray-light));
  --color-subtle: oklch(var(--lch-wood-light));
  --color-subtle-dark: oklch(var(--lch-wood-light));
  --color-selected: oklch(var(--lch-beige-dark));
  --color-selected-dark: oklch(var(--lch-blue-dark));
  --color-marker: oklch(var(--lch-orange));
  --color-always-black: oklch(var(--lch-always-black));
  --color-always-white: oklch(var(--lch-always-white));
  --color-highlight: oklch(var(--lch-yellow));
}

.colorize--white {
  filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(150%) hue-rotate(35deg)
    brightness(98%) contrast(102%);
}

.colorize--black {
  filter: invert(0);
}