Thank you for this!

Excellent write-up! Something I've found annoying with the variables is that if you create a variable like this:

--clr-primary: #fa0e9d;

you can't then use that variable like so:

background-color: rgba(var(--clr-primary), 0.5)

A solution I've found is to create 2 variables:

:root {
  --clr-primary: rgb(var(--clr-primary-rgb));
  --clr-primary-rgb: 250, 14, 157;
}

.otherElement {
  background-color: rgba(var(--clr-primary-rgb), 0.5);
}

Cheers 🍻