CSS variable not working (not defined?)?

I want to change all the accent colors on my website at once. So I looked into creating variables and wrote the following code:

 :root {    --color: red; } .container-seeMore:hover {    background-color: var(--color, #346047); }

The fallback color is only used, and the browser says that –color is not defined. What could be causing this? What did I do wrong?

I'm using Angular 18 if that changes anything