Alternatives for @apply proposal

apply.css

@define --my-theme {
  color: var(--main-color, #bada55);
  font-size: 1em;
  /* ... */
};

.hero {
  apply: var(--my-theme);
  width: 100vw;
  /* ... */
}

at-ruled-statements.css

@charset  <string>;

@import [ <string> | <url> ] [<media-query-list>]?;

@namespace <namespace-prefix>? [ <string> | <uri> ]; /* where <namespace-prefix> = IDENT */

@media <media-query-list> {
  <group-rule-body>
}

@supports <supports-condition> {
  <group-rule-body>
}

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
} /* where <family-name> = <string> | <IDENT>+
     <feature-tag-value> = <string> [ <integer> | on | off ]? */

I don´t like your "apply"

apply: var(--my-theme);

Tha´s as if you´ld be using a "custom property", not a "custom at rule.
Maybe better use the @ inside var();

.hero {
  apply: var(@--my-theme);
  width: 100vw;
  /* ... */
}