Handling custom.css

I’m trying to work with a custom CSS that allows me to override the bootstrap default variables. For this I find the bootstrap documentation the following example:

I have now set this up accordingly - in variant A: If I now change variables such as $primary or $secondary, this works wonderfully.

But if I want to extend an existing map, then I have the following problem:

I want to add another color $tertiary to the map $theme-colors, I apply the following example: Sass · Bootstrap v5.1

i add the code to my custom.css but then i get the following error:
Error: Undefined variable:"$theme-colors".

How do I have to do that I can make all customizations against the bootstrap default in this custom.css?

Thank you all, Reto