Setting text colors using CSS Variables through ERB

Question

I am having issues settings black or white text colors based on colors calculated for lightness and set using CSS variables using ERB.

application.html.erb

<style>
  :root {
    --color-background: <%= @record.background_color %>;
    --background-color-r: red(<%= @record.background_color %>);
    --background-color-g: green(<%= @record.background_color %>);
    --background-color-b: blue(<%= @record.background_color %>);
  }
</style>

application.scss

@function set-text-color($title) {
  $r: calc(var(--#{$title}-r) * 0.2126);
  $g: calc(var(--#{$title}-g) * 0.7152);
  $b: calc(var(--#{$title}-b) * 0.0722);
  $sum: calc(#{$r} + #{$g} + #{$b});
  $perceived-lightness: calc(#{$sum} / 255);
  $threshold: 0.7;
  @return hsl(0, 0%, (#{$perceived-lightness} - #{$threshold}) * -10000000%);
}
...
.button--primary {
    border-color: var(--color-background); // works fine
    color: set-text-color("background-color"); // DOES NOT WORK - Always being set to a black color
}

At the moment this is always showing the black color, regardless of what background color has been entered through a CSS variable. However, when I change it to a static color using a SCSS variable it works perfectly fine. How do I get it to work dynamically through the CSS variable and/or is there a better way to implement this dynamically passing in the background color from the rails record?