have you considered passing the size down the react tree through context so that the relevant component can own the style ? It will also be easier to override for users because they are less specific

Yes, we've considered that possibility before, as well as other alternatives to spacing, but chose to go with the simplest solution for now as conversations kept delaying implementation.
Each solution has its own pros and cons. For that one, users who add non Card components to a Card would get a bad DX as they get no padding by default and would need to consume a context to apply something as trivial as a padding. Another problem is the fact that we can't have doubled paddings in between elements and flex displays do not allow for collapsible margins, which would mean a complex logic to apply the proper padding.
I'm 100% open to suggestions to these cons however.

Oh this is also for non-card components ? I don't see this var being used in any styles targeting non-card components here

Is the intended ussage something like this?

import { makeStyles, cardSizeVar } from '@fluentui/react-components`;

const useStyles = makeStyles({
  cardPadding: {
    ...shorthands.padding(`var(${cardSizeVar})`)
  }
})

function NonCardComponent() {
  const styles = useStyles();
  return <div className={styles.cardPadding} />
}

Not particularly but it's also a possibility we open for our users, especially if we end up not using gap.
However, the reason we put this in a var is to simplify any overwriting of the value as changing the var will affect both padding and gap, and these two need to be aligned.

and these two need to be aligned

This point makes sense to me. I do wonder if we will consider this cssVar a part of our public API, once feature engineers do a devtools inspect and see it, they can certainly use it in overrides. If we ever rename/remove this var it could break those overrides

I see that slider already does this, if we will stick with the cssvar approach we should export it for users at least

Good point. My approach was not to export until we're sure we want to for the reasons you mentioned (avoiding misuse or name changes).
Thanks for sharing the slider example though. I'll align the usage and export it to avoid possible problems.

😍 using css vars the rite way yay !

fancyness