Please update this code to use semantic color tokens from your design system instead of hardcoded colors. Replace specific color values (like bg-blue-500, text-red-600, #ffffff, etc.) with semantic tokens (like bg-primary, text-secondary, bg-background, text-foreground, etc.) that will work better with the design system and support proper theming.