Establish a real design system foundation by moving the project from
inline arbitrary-value classes to named tokens and reusable utilities.
Tokens added to @theme (auto-generate Tailwind utilities):
- Shadows: shadow-rest, shadow-stamp-{rest,hover,pressed,card},
shadow-popover, shadow-floating-panel{,-dark}, shadow-overlay
- Motion: duration-{fast,normal,slow,slower};
ease-{standard,out-soft,spring-overshoot}
Semantic mode-switching colors added to :root / .dark so utilities
auto-adapt without dark: variants:
- --color-border-subtle, --color-text-subtle, --color-skeleton
Utilities migrated to Tailwind v4's @utility directive with direct CSS
properties (previously @layer utilities with @apply chains, which
silently failed when chaining to other user-defined utilities):
- border-subtle, text-subtle, focus-ring
- surface-canvas, surface-card, surface-card-elevated, surface-popover,
surface-floating
- flex-center, skeleton-fill, text-label-mono
Notes:
- text-secondary was renamed to text-subtle because --color-secondary is
registered in @theme (a near-white shadcn surface token), which made
Tailwind v4 auto-generate a colliding text-secondary utility that won
over the user-defined one — every consumer effectively rendered as
near-white text. The text-subtle name pairs cleanly with border-subtle
and avoids any @theme collisions.
- Dead --space-* variable scale removed (was defined but never wired
into @theme; Tailwind's default spacing scale is used everywhere).
Ilia Mashkov