Semantic color

A named color that carries a meaning (label, separator, surface) rather than a raw value. It resolves to different values per appearance — light, dark, increased contrast — so one reference adapts everywhere.

`--text-primary` is near-black in light mode and near-white in dark mode; the component never hard-codes either.

Tap the example to replay it · press and hold to slow it down