Failing to load css variables with sass variables?

[jesvtb]

I am using reveal.js with customized css and chosen compiler. But the following code produces error as following.

SITE WIDE SETTINGS

custom_theme_compile = true
transpiler = "dartsass"
outputStyle = "compressed"

FAILURE CODE

$red-h: 3;
$red-s: 75%;
$red-l: 55%;
$red-a: 1;
$red: hsl($red-h, $red-s, $red-l);

.reveal .palette1 {
    --main: #{$red}; (tried $red, doesn't work either)
    .card1:hover {
        background-color: lighten(var(--main), 10%);
    }
}

I have checked SASS breaking changes section. None of the #{$red} $red works.

ERROR

argument $color of lighten($color, $amount) must be a color

[pamubay]

i might be wrong, but i dont think lighten supports css custom property as an argument.

Sass: sass:color

[cshoredaniel]

That would make sense as lighten() is processed statically while a custom CSS property is processed at page load. If lighten() were a CSS function it would be different, but it is a SASS function.