Root Variables

Define every CSS custom property in one variables.css file for each CSS bundle. Put default values at :root and theme overrides at the owning root selector in that same file. Component stylesheets must only reference those variables; they must not define variables, even in their own :root block. Keep Tailwind design tokens and permitted theme-root utility variables in variables.css too, so all values for a new theme can be found in one place.

Correct

variables.css:

:root {
    --surfaceColor: #fff;
}

:root.dark {
    --surfaceColor: #111;
}

Incorrect

components/browse.css:

:root {
    --browseTitleSurface: #fff;
}

.browse {
    .title {
        background: var(--browseTitleSurface);
    }
}

Fix

Move every custom-property definition into the owning bundle’s variables.css, group defaults and theme overrides by root selector, and leave only var(...) references in component stylesheets.