:root {
  /* Named color values */
  --lch-blue: 48.82% 0.2172 264.37;
  --lch-blue-light: 97.05% 0.01418224665972208 254.6041641690868;
  --lch-gray: 94.1% 0 0;
  --lch-purple: 40.77% 0.1751 305.87;
  --lch-purple-light: 88.79% 0.0456 305.87;

  /* Abstractions */
  --color-border: oklch(var(--lch-gray));
  --color-border--active: oklch(var(--lch-purple));
  --color-primary: oklch(var(--lch-purple));
  --color-primary-light: oklch(var(--lch-purple-light));
  --color-secondary: oklch(var(--lch-blue));
  --color-secondary-light: oklch(var(--lch-blue-light));

  /* Redefine named color values for dark mode */
  @media (prefers-color-scheme: dark) {
    --lch-gray: 25.2% 0 0;
  }
}