error evaluating function `rgba`: color functions take numbers as parameters

So first of all I am by no means good in CSS, but I learned a lot the last days working on custom CSS.

I created what I want in Visual Studio Code and it works really nice
Here you can take a look in codepen:

https://codepen.io/MrPhilip/pen/abaKLvG (wish I knew how to embed it here)

My plan with this in short is to make color changes super simpel. Instead of multiple colors with different alpha values I can just link all to one. Here you can see what I mean:

:root {
  --color-primary--1: 255, 31, 68;
}

.glow-multi {
  color: rgba(var(--color-primary--1), 1);
  text-shadow: -9px 3px 1px rgba(var(--color-primary--1), 0.2), 
  -18px 6px 2px rgba(var(--color-primary--1), 0.1), 
  var(--ui-glow-text--headline);
}

Sadly I get this error in Squarespace:

Am I doing something wrong here?! It looks like it's not able to interpret the numbers. 😪

If not its sad that it works literally everywhere and people on the internet recommend this method but Squarespace cant handle it.

Quote

Let us know how it goes.

First of all thank you for your help. 😀

I got it to run now! It's only sad now, that I have to change the code every time to the *old* Squarespace standard. That's a bit of a shame and cripples workflow. I like to have all the codes organized in Visual Studio so I know how it looks and what it does.

Because now my code works there, but not in Visual Studio Code or Codepen.