I have in css (generated by sass) variable called --scondary and it’s value is red(#f00)
i want to create more variables for opacity like –scondary-100,–scondary-90,…
i used color-mix in oklab so this is the code

div { 
  width:100px;
  height:100px;

  --secondary: #f00;
  --secondary-100: color-mix(var(--secondary) 100%, transparent 0%)
  background: var(--secondary-100);
}

<div></div>

as you can see the div is transparent not red
i tried it in firefox and this is the result

in devtools i just wrote the same thing contains in the variable --secondary-100 out of it
and it suddenly works idk where is the problem or is it a well known problem and I’m living under my rock

btw this variables and colors is user choice and not static so i can’t just write them my self and the best i can do is to use javascript to deal with those colors and save them directly without using color-mix