Do CSS variables work inside of a template or custom element?

I’m building a small website using web components written in pure HTML, CSS, and Javascript. Everything is working well except for the CSS variable that I want to use. Here is the stylesheet:

 :root { 
    --bh-color-1:#8f1010;
  }
  .bh-action {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    color:whitesmoke;
    background-color:var(--bh-color-1);
    height:32px;
    padding: 0px 16px;
    border-radius: 16px;
    margin-top: 8px;
  }

Is there a problem with the syntax? This is from DevTools:

<bh-feature>
            <header slot="header">
              <script type="module" src="/@vite/client"></script>
Sharpening Service</header>
            <p slot="content">yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada</p>
            <a href="#" slot="action" class="bh-action">Get Started</a>
        </bh-feature>

You can see that the bh-action class from the stylesheet is set on an <a> element which is inside a custom element.
Also from DevTools:

.bh-action {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    color: whitesmoke;
    background-color: var(--bh-color-1);
    height: 32px;
    padding: 0px 16px;
    border-radius: 16px;
    margin-top: 8px;
}

You can see that the style has been applied to the <a> element, but the variable hasn’t been resolved to a value. Everything else works as expected, including the color if I use the numbers directly. The entire stylesheet is imported into the template, including the variable declaration. So far I’ve tried putting the variable and class declarations in the style tag of the template and wrapping the variable in curly braces, like var({--bh-color-1}) and var({{bh-color-1 }}).
Is there a way to make this work or is it an issue?