Correct way to change card background

I have a question about the new Bootstrap V5.2. New there are yes the CSS variables. I am now not sure how I should customize better / easier. Continue with the BS variables or switch to these CSS variables.

Example.
I want to change the background of the cards from “white” (default) to “primary”.

Until now I did this with the BS variable:
$card-bg: primary;

If I now understand BS correctly, this could now also be done via the CSS variable:

.card {
--bs-card-bg: $primary;
}

or

.card {
--bs-card-bg: --bs-primary;}

What is your recommendation?
BS variable or CSS variable?

Translated with DeepL Translate: The world's most accurate translator (free version)

I use the following:

.card{
background: var(--bs-primary) !important;
}

The "!important" isn’t necessary, but I add it just in case.

I use the BS variables because I know it’s easier to type out, and it will auto-complete.
Having to type out $primary completely just seems to waste time.
Just typing a hyphen, and seeing the options seems to make the process go by quicker.