A custom property is a value stored on an element that other rules read. That makes a theme a set of named values in one place, and it makes a component able to restyle itself from its own container. Both are ordinary CSS, not a preprocessor.
About 1 min of reading
Theme a component with a scoped override.
Global theme
Before you run it, say out loud what it will print. Then open the answer.
Scoped override
Before you run it, say out loud what it will print. Then open the answer.
A property called --ink is read wherever text is drawn; one called --dark-blue describes a look and has to be renamed when the design changes. Naming by role is what makes a theme swap a one file change.
A custom property set on a container is visible to every descendant, which is why the definition belongs high in the tree. Setting it on a leaf makes it visible only there, and that is usually the bug.
Set the colours and spacing on the root, then read them with var(). Changing one value changes every rule that reads it, which is what makes a theme editable in one place.
Redefine the same property on a component and everything inside it reads the new value. That scoping is how a dark card sits in a light page without a second set of rules.
var(--gap, 8px) uses the fallback when the property is not set. That default is what lets a component work standalone and inside a themed container without either breaking.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.