CSS Validation Errors Related to Page-Specific Color Variables

Hi GP Team,

I hope you’re all doing well.

A little over a year ago, I posted a question about having borders, links, text, etc., change color depending on which page the user is on: https://generate.support/topic/change-footer-element-background-on-each-page/

Thanks to your advice, we successfully implemented the solution on our site: https://0011.digital. We’re now able to assign a different color to each page and it works beautifully.

However, a few days ago, we ran our site through a CSS validator:
https://jigsaw.w3.org/css-validator/validator?uri=0011.digital&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

As you can see, the validator is showing multiple (139) “Parse Error” warnings, such as:
1 :root Parse Error –0011-primary-yellow)

Here’s a snippet of the CSS code we’re using under Customize > Additional CSS:

/* Color Changes YELLOW */
.blog,
.page-id-2036,
.page-id-4446,
.page-id-2951,
.page-id-5987,
.page-id-6095,
.page-id-8333 {
–main-color: var(–0011-primary-yellow);
}

/* Color Changes GREEN */
.page-id-9171,
.page-id-5958,
.page-id-2877,
.page-id-5991,
.page-id-5997 {
–main-color: var(–0011-analogous-green2);
}

/* Color Changes RUBY RED */
.page-id-8823,
.page-id-8338,
.page-id-5516,
.page-id-5975,
.page-id-5994,
.page-id-6067 {
–main-color: var(–0011-ruby-red);
}
We’ve also added the variable in Customizer > Colors like this:

CSS Variable Name: main-color
Value: #9EDEE0

CSS Variable Name: 0011-primary-yellow
#fff100

CSS Variable Name: 0011-ruby-red
#ff0000

and so on for each color.

I am not so good at this but the parse error seems to show the code is missing the opening parenthesis,”(” but I am lost as to why or where to fix this, as it is correct in the additioal css (as you can see above).
Another suggestion I saw, was adding this CSS to the top of my additional CSS, but that didnt fix it either.

/*TESTING THE CSS AUDIT FIXES*/
:root {
–0011-primary-yellow: #fff100;
–0011-sunset-orange: #FD5E53;
–0011-clear-sky: #f2f2f3;
–0011-midnight-blue: #101720;
–0011-analogous-green1: #C0FF00;
–0011-analogous-green2: #56FF00;
–0011-white: #ffffff;
–0011-black: #000000;
–0011-link-hover: #9EDEE0;
–0011-ruby-red: #ff0000;
}

We also tried disabling LiteSpeed Cache to rule out minification or caching issues, but the problem persists.

Any guidance would be greatly appreciated.

Thank you for your time,
Richard