why composed css variable not being set at the element level

Question

why css variable is not being set at the element level when composed. For eg in the below case I would have expected the color to be 100deg

:root {
 --regular: 90% 50%;
 --color-secondary: hsl(var(--color,0deg) var(--regular));  
}
.demo-box {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
.bg-secondary {  background: var(--color-secondary); --color: 100deg ;}

<div class="demo-box bg-secondary"></div>