Enhance theming and UI components: Introduce a new dark cyan theme in globals.css, update layout to utilize ThemeProvider for consistent theming, and refactor button and card components to use CSS variables for styling. Improve navigation and alert components with dynamic styles based on theme variables, ensuring a cohesive user experience across the application.

components/ui/Button.tsx

@@ -10,14 +10,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const variantClasses = {
-  primary:
-    "border-pixel-gold/50 bg-black/60 text-white hover:bg-pixel-gold/10 hover:border-pixel-gold",
-  secondary:
-    "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30 hover:border-gray-500",
-  success:
-    "border-green-500/50 bg-green-900/20 text-green-400 hover:bg-green-900/30",
-  danger: "border-red-500/50 bg-red-900/20 text-red-400 hover:bg-red-900/30",
-  ghost: "border-transparent bg-transparent text-white hover:text-pixel-gold",
+  primary: "btn-primary border transition-colors",
+  secondary: "btn-secondary border transition-colors",
+  success: "btn-success border transition-colors",
+  danger: "btn-danger border transition-colors",
+  ghost: "btn-ghost border-transparent transition-colors",
 };
 
 const sizeClasses = {