:root {
  /* Named color values */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;
  --lch-always-black: 0% 0 0;

  /* Abstractions */
  --cf-color-negative: oklch(var(--lch-red));
  --cf-color-positive: oklch(var(--lch-green));
  --cf-color-bg: oklch(var(--lch-white));
  --cf-color-message-bg: oklch(var(--lch-gray));
  --cf-color-text: oklch(var(--lch-black));
  --cf-color-text-reversed: oklch(var(--lch-white));
  --cf-color-link: oklch(var(--lch-blue));
  --cf-color-border: oklch(var(--lch-gray));
  --cf-color-border-dark: oklch(var(--lch-gray-dark));
  --cf-color-border-darker: oklch(var(--lch-gray-darker));
  --cf-color-selected: oklch(var(--lch-blue-light));
  --cf-color-selected-dark: oklch(var(--lch-blue-dark));
  --cf-color-alert: oklch(var(--lch-orange));
}