update cursor rules to follow semantic/theme aware color patterns

.cursorrules

@@ -8,6 +8,20 @@ Code Style and Structure
 - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
 - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.
 
+CSS and Styling Guidelines
+
+- Always prioritize semantic, theme-aware CSS classes over hard-coded colors and values.
+- Use CSS custom properties and semantic class names that automatically adapt to light/dark themes.
+- Prefer these semantic classes:
+  * `bg-background`, `bg-card`, `bg-muted` instead of `bg-white`, `bg-gray-100`
+  * `text-foreground`, `text-muted-foreground` instead of `text-gray-900`, `text-gray-600`
+  * `border-border`, `border-input` instead of `border-gray-200`, `border-gray-300`
+  * `focus:ring-ring`, `focus:border-ring` instead of `focus:ring-blue-500`, `focus:border-blue-500`
+  * `text-primary`, `text-accent` for semantic color usage
+- Avoid hard-coded color values like `text-gray-500`, `bg-white`, `border-blue-500` unless absolutely necessary.
+- Use opacity modifiers (e.g., `bg-primary/10`, `text-muted-foreground/70`) for subtle variations.
+- Ensure all components work seamlessly in both light and dark themes.
+
 Naming Conventions
 
 - Use lowercase with dashes for directories (e.g., components/auth-wizard).