Results Summary Component

Three questions for the community please!

1. Why can't I get my linear-gradient background for the circle to work?

I tried the variable defined in the root section: --color-circle-gradient as well as typing the linear-gradient out: linear-gradient(hsl(256, 72%, 46, 1), hsl(241, 72%, 46%, 0)); But nothing works. But if I add a static color (not a gradient) it works perfectly fine!

2. What is the best way to handle the transparency? It feels as if I'm doing the same thing in multiple places and there should be a better way?

3. Where can I find resources to help me add the json variables? I can't find any solutions in vanilla HTML and CSS, only Tailwind and other frameworks I'm not familiar with. I would love to give this a go!

And any other feedback on how to improve would be appreciated. Thank you!