Access a CSS variable in JavaScript

I'm using PHP to generate my website's pages, Bootstrap 5 to style the pages and Stripe to process customer payments. I'd like to style Stripe's payment elements to match the underlying theme of my website.

I can inspect an element of my webpage and see that its background colour is #2272b30, defined by CSS variable --bs-body-bg:

I can style the Stripe payment element successfully with:

appearance: { variables: { colorBackground: '#272b30', colorText: '#aaaaaa' } }

But when I use:

appearance: { variables: { colorBackground: var(--bs-body-bg), colorText: var(--bs-body-color) } }

The payment element fails to appear.

Stripe documentation says I can use CSS variables to style the element and the bootstrap CCS files are loaded before the Stripe JavaScript in my page header:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/slate/bootstrap.min.css" crossorigin="anonymous" > <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" > </script> <script src=https://js.stripe.com/clover/stripe.js></script>

Is it a scoping issue? Is my assumption that external resources are loaded in the order they are referenced incorrect? Am I doing something else wrong?