Fixed CSS syntax errors by replacing @apply statements with CSS variables:
- Replaced nested color classes (bg-surface-container-*, text-on-*, etc.)
- Used CSS custom properties for all dynamic color values
- Removed @apply for non-existent Tailwind classes (mt-0.5, text-muted-foreground)
- All components now use CSS variables with proper fallback values
This resolves the 'class does not exist' errors while maintaining the
full design system compliance.