How to use Bulma CSS variables in custom CSS?

[mlncn]

This is about Bulma and the Docs— it is a support request but may point to a bug or a needed feature.

Overview of the problem

This is about the Bulma CSS framework (and potentially missing Bulma Docs). I'm using Bulma version 1.0.0 My browser is: Firefox 127.0.1 This is may be a Sass issue: I'm using version 1.76.0 I am sure this issue is not a duplicate.

Description

We are customizing the burger menu to use the checkbox CSS-only, no JavaScript approach (which is cool but the details are not important here). Lacking any way (that i can tell) to override the burger mixin without also overriding the entire navbar.scss file, we are simply adding some custom CSS below our simple Bulma import— a situation that must come up all the time, but is not in the documentation yet that i found.

The problem is that if we use a CSS variable that should have been defined by Bulma, we are told that it is not— and if we use the Bulma variable it converts itself to a CSS variable that reports it is not defined!

Steps to Reproduce

Here is the code:

$custom-green: #2E5B60;

@use "../../../node_modules/bulma/sass" as bulma with (
  $primary: $custom-green
);

.menu-btn {
  .navicon {
    background: bulma.$navbar-burger-color;
  }
}

Try to use the navbar burger color as either a Sass variable or a CSS variable.

Expected behavior

I have access to the navbar burger color (and any other Bulma Sass variable or Bulma CSS variable) in my custom code.

Actual behavior

--bulma-navbar-burger-color: var(--bulma-navbar-item-color);

Browser inspector reports: --bulma-navbar-item-color is not set

Looking at this more maybe this is a bug specific to this one variable, but documentation on how this all would be expected to work would help identify when behavior is a one-off specific bug (if that is the case here).