Five hundred hardcoded color values across eighty files. Hex codes, rgba values, Tailwind color classes — each one a promise that the design will never change. The design always changes.
The sweep replaced every fixable hex value with a CSS custom property reference. A hundred and seventy values in the PrimeVue Nebula preset alone moved from hardcoded hex to var() references. Fifty Vue component style blocks got the same treatment. Thirty new design tokens were created to cover gaps: amber, muted transparency variants, a deeper primary, success and warning shades at 8% and 15% opacity.
Chart.js can't read CSS variables at render time — it needs computed values. A useChartTheme composable solves this by reading getComputedStyle at runtime and passing the resolved colors to Chart.js configuration. The charts adapt to the theme without hardcoded color arrays.
The AI detection color system — structureColorMap, getStructureColor(), LAWN_COLOR — had been scattered across multiple files. Consolidated into a single export in useAiDetection.js.
Tailwind config gained mappings for the new token families. A hundred and eighty-one leftover migration comments — /* was: #1a1a2e */ — got stripped. The remaining hex values in the codebase are all intentional: SVG stop-color attributes that browsers can't resolve from CSS variables, brand defaults that need literal values for embed customization, integration colors that represent third-party brands.
A token-driven codebase is a codebase that can change its mind. Change one variable and the entire application follows. That's not flexibility for its own sake — it's the difference between "retheme the product" taking an afternoon versus taking a month.