This sounds interesting, but I’d need to think about it more so I could picture how things fit together as they get more complex and different styles logically overlap. This looks to head in the utility direction possibly too far for that to work nicely. But it may well work better than I’m initially imagining.

Unfortunately I can’t give it more attention now, because I should have gone to sleep a couple of hours ago…

—⁂—

Another approach entirely is to embrace last-declaration-wins, by :where()ing everything:

  :where(.t0)           { background: var(--primary-color); }
  :where(.t0:hover)     { background: var(--primary-hover-color); }
  :where(.t0:active)    { background: var(--primary-pressed-color); }
  :where(.t0[disabled]) { background: var(--surface-color); }