--cal-brand-color is not adjustable through cssVarsPerTheme

[ErikHendrikson]

Issue Summary

It seems the --cal-brand-color is not adjustable through cssVarsPerTheme. And this is probably due to cal-brand-color being undefined at classname .bg-brand. This is happening in the react inline embed.

Steps to Reproduce

1. go to https://codesandbox.io/p/sandbox/embed-advanced-css-vars-x2sdgy.
2. find in the chrometools.
3. classname .bg-brand cannot find cal-brand-color (--cal-brand-color is not defined) and uses the 'black' fallback.

I am expecting to be able to change the cssvars through cssVarsPerTheme, but cal-brand-color is therefore not adjustable. The loader always stays black.

Actual Results

• The loader stays black instead of another color.

Expected Results

• The css-var cal-brand-color is defined and therefore can be overwritten through cssVarsPerTheme.

Technical details

• Chrome 128.0.6613.115
• @calcom/embed-react": "^1.5.1", "next": "14.2.8", "react": "^18", "react-dom": "^18"

Evidence