SCSS - Lighten/Darken do not compile?

In my main file styles.scss I have declared a variable:

$primary  : #1e4f9c;
$change   : 15%;

Then I import another SCSS file:

@import "/project-assets/css/layout.scss";

In that file I create CSS variables:

:root {
    --primary: #{$primary};
    --primary-light: lighten(#{$primary}, #{$change});
    --primary-dark: darken(#{$primary}, #{$change});
}

but for some reason the output here is not the new HEX values but the function call stays as it is:

:root {
    --primary: #1e4f9c;
    --primary-light: lighten(#1e4f9c, 15%);
    --primary-dark: darken(#1e4f9c, 15%);
}

I found out that lighten function doesn't work as expected with percentage and changed it to color.scale but the output is still in SCSS not changed into a HEX. What am I missing here?

Css variables can store only static values, not functions ? Try this instead:

$primary: #1e4f9c;
$change: 15%;
:root {
  --primary: #{$primary};
  --primary-light: #{lighten($primary, $change)};
  --primary-dark: #{darken($primary, $change)};
}