Hard-coded colors are debt with interest. The first hex value you paste into a component will outlive three redesigns and betray you in dark mode.
Semantic tokens, not colors
Nothing in our components knows what color it is. A card asks for --card, body copy asks for --foreground, the strongest action asks for --primary. The active palette decides what those mean — per theme, per mode.
color: hsl(var(--foreground));
background: hsl(var(--card));
border-color: hsl(var(--border) / 0.45);The payoff
A new palette is a data change, not a refactor. Switch it live and every app follows — including content written months ago, because even database-authored pages resolve the same variables at render time.
