How to split the @theme up over several files?

[binaryartifex]

For the life of me I can't figure out how to split the @theme over several files. Im overwriting the color-* namespace and id like to split my accents, system and semantic colors between 3 separate files for better organisation instead of one big flat file....further to this id like to have light and dark modes for the system and semantic files. i keep getting errors when attempting to import other files with an @theme and a dark mode attribute rule beneath said theme that these imports must only have an @theme directive...

[wongjn]

How are you @importing them? Perhaps use @reference instead.

[binaryartifex]

@wongjn i think i narrowed it down. so my css entry point, for brevities sake looks this

/** main.css **/
@import "./accents.css";

@theme {
  --font-body: Inter, sans-serif;
  --color-*: initial;
  --color-black: #000;
  --color-white: #fff;
}

the accents file being imported

/** accents.css **/

@theme inline {
  --color-accent-red: oklch(0.577 0.245 27.325);
}

This doesn't work until i remove the line --color-*: initial; and it renders and i also get intellisense back. Its my intent to completely remove the tailwind palette in favour of a for-purpose palette but it'd be nice to keep it separate from the main css entry point. ive tried every other possible combination of reference/inline/default between the imports and @theme attributes in the accents file....