That guide is a bit outdated, yes, although what is tripping up in your case is not core variables but rather SCSS colors in a component not inheriting the theme’s color scheme. (Nonetheless, I will go through the guide and update it.)
A little bit of context: in August/September 2020 we moved to using CSS custom properties for colors. The main reason for that change was so that we could support automatic dark mode in a way that was light and fast. Themes have CSS and JS, so they cannot be switched quickly, but using CSS custom properties, color schemes can be flipped on the fly, without refreshing the page.
I see in your site that you have 4 themes with a color scheme each and a component shared across the themes for the shared styles. You could achieve essentially the same thing with one main theme (that would contain all the shared styles) and 4 user-selectable color schemes. You would need to move all color calculations in the color_definitions.scss file of the main theme, but it is doable, I’ll try to find some time and give this a shot tomorrow.