:where(html) {
  --violet-0-hsl: 252 100% 97%;
  --violet-1-hsl: 257 100% 93%;
  --violet-2-hsl: 256 100% 87%;
  --violet-3-hsl: 255 94% 79%;
  --violet-4-hsl: 255 93% 72%;
  --violet-5-hsl: 255 91% 67%;
  --violet-6-hsl: 255 86% 63%;
  --violet-7-hsl: 255 78% 60%;
  --violet-8-hsl: 255 67% 55%;
  --violet-9-hsl: 255 53% 50%;
  --violet-10-hsl: 255 53% 44%;
  --violet-11-hsl: 255 53% 37%;
  --violet-12-hsl: 255 53% 31%;
}