Is there an efficient way to override CSS-Variables(CSS Custom Properties) from Bootstrap5 via CDN?

Question

I include Bootstrap5 via CDN like this:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

Link where I found this code

My goal: I want to change the colors of my bootstrap colors from the default-blue to some red-tone. Sounds easy, right? Well it´s not: If you first include boostrap CDN and then your own css (as you should) and add the code

--bs-secondary: rgb(243, 113, 33)

the color of .btn-secondary does not change.

In order to change the color from .btn-secondary I would have to manually change the css of this class. This can be quite inefficient if you want to change 5 colors or other variables.

My Question therefore is: Is there an easy way to override custom properties (=css variables) with Bootstrap5 via CDN?