CSS custom properties
css variables, custom properties, --variable, var()Definition
Values declared once on an element (--ui-radius: 0.5rem) and read anywhere below it with var(--ui-radius) — the cascade’s own variables, inherited, overridable per element or per data-theme, readable and writable from JavaScript, and the mechanism every design token on the web resolves through at runtime
What makes this site’s nine themes one stylesheet: each theme sets the same custom properties under its data-theme selector, every component reads them, and switching a theme changes an attribute. They are not a preprocessor variable — a Sass $var is gone at build time; a custom property is live, so a container or a media query or a script can change it and everything downstream follows. The no-hardcoded-colors rule is a rule about these. Style queries read them; relative color syntax derives from them; cascade layers order who sets them.
A token is a decision; a custom property is the decision, live in the browser, with a name. The whole theme system is a list of names and the places they are read.