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/SectionTitle.tsx

@@ -28,21 +28,28 @@ export default function SectionTitle({
 
   let titleClasses = `${baseClasses} ${sizeClasses[size]} ${className}`;
 
+  const titleStyles: React.CSSProperties & {
+    WebkitBackgroundClip?: string;
+    WebkitTextFillColor?: string;
+  } = {};
   if (variant === "gradient") {
-    titleClasses += " bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent";
+    titleClasses += " bg-clip-text text-transparent";
+    titleStyles.background = `linear-gradient(to right, var(--accent-color), var(--accent), var(--accent-color))`;
+    titleStyles.WebkitBackgroundClip = "text";
+    titleStyles.WebkitTextFillColor = "transparent";
   } else if (variant === "gold") {
-    titleClasses += " text-pixel-gold";
+    titleStyles.color = "var(--accent-color)";
   } else {
-    titleClasses += " text-white";
+    titleStyles.color = "var(--foreground)";
   }
 
   return (
     <div className="text-center">
-      <h1 className={titleClasses} {...props}>
+      <h1 className={titleClasses} style={titleStyles} {...props}>
         {variant === "gradient" ? (
           <span
             style={{
-              textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
+              textShadow: `0 0 30px color-mix(in srgb, var(--accent-color) 50%, transparent)`,
             }}
           >
             {children}
@@ -52,7 +59,10 @@ export default function SectionTitle({
         )}
       </h1>
       {subtitle && (
-        <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
+        <div
+          className="text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide"
+          style={{ color: "var(--accent-color)" }}
+        >
           <span>✦</span>
           <span>{subtitle}</span>
           <span>✦</span>
@@ -61,4 +71,3 @@ export default function SectionTitle({
     </div>
   );
 }
-