Set up color system

[with-heart]

Just something I was playing around with. No idea if it's viable or even worth doing:

:root {
  --lightness: 72%;
  --chroma: 0.1387;
  --hue: 0;
  --base-color: oklch(var(--lightness) var(--chrome) var(--hue));
}

[data-color="black"] {
  --lightness: 0;
  --chroma: 0;
}
[data-color="white"] {
  --lightness: 100%;
  --chroma: 0;
}
[data-color="gray"] {
  --lightness: 70%;
  --chroma: 0;
}
[data-color="red"] {
  --hue: 15;
}
[data-color="pink"] {
  --hue: 345;
}
[data-color="green"] {
  --hue: 145;
}
[data-color="blue"] {
  --hue: 240;
}
[data-color="orange"] {
  --hue: 60;
}
[data-color="yellow"] {
  --hue: 90;
}