Add Christmas decorations and theme styles

Introduced a ChristmasDecorations component with animated snowflakes, twinkling stars, and festive emojis. Updated global CSS and Tailwind config to include Christmas-themed animations, colors, and effects. Integrated the decorations into the main layout for a seasonal appearance.

app/globals.css

@@ -241,6 +241,122 @@ body {
   .bg-muted {
     background-color: hsl(var(--muted) / 0.8);
   }
+
+  /* Christmas-themed animations */
+  @keyframes twinkle {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.3; transform: scale(0.8); }
+  }
+
+  @keyframes snowflake {
+    0% {
+      transform: translateY(-100vh) rotate(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(100vh) rotate(360deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes sparkle {
+    0%, 100% { 
+      opacity: 0;
+      transform: scale(0) rotate(0deg);
+    }
+    50% { 
+      opacity: 1;
+      transform: scale(1) rotate(180deg);
+    }
+  }
+
+  @keyframes glow {
+    0%, 100% {
+      box-shadow: 0 0 5px hsl(var(--christmas-red)), 0 0 10px hsl(var(--christmas-red)), 0 0 15px hsl(var(--christmas-red));
+    }
+    50% {
+      box-shadow: 0 0 10px hsl(var(--christmas-green)), 0 0 20px hsl(var(--christmas-green)), 0 0 30px hsl(var(--christmas-green));
+    }
+  }
+
+  /* Christmas decorative elements */
+  .christmas-twinkle {
+    animation: twinkle 2s ease-in-out infinite;
+  }
+
+  .christmas-snowflake {
+    position: absolute;
+    color: white;
+    font-size: 1rem;
+    animation: snowflake 10s linear infinite;
+    pointer-events: none;
+  }
+
+  .christmas-sparkle {
+    animation: sparkle 1.5s ease-in-out infinite;
+  }
+
+  .christmas-glow {
+    animation: glow 2s ease-in-out infinite;
+  }
+
+  /* Subtle Christmas gradient backgrounds */
+  .christmas-gradient {
+    background: linear-gradient(135deg, 
+      hsl(var(--christmas-red) / 0.1) 0%, 
+      hsl(var(--christmas-green) / 0.1) 50%, 
+      hsl(var(--christmas-gold) / 0.1) 100%);
+  }
+
+  /* Christmas-themed borders */
+  .christmas-border {
+    border: 2px solid;
+    border-image: linear-gradient(45deg, 
+      hsl(var(--christmas-red)), 
+      hsl(var(--christmas-green)), 
+      hsl(var(--christmas-gold))) 1;
+  }
+
+  /* Subtle Christmas pattern overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+      radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Christmas-themed card hover effects */
+  .card:hover {
+    border-color: hsl(var(--christmas-red) / 0.3);
+    transition: border-color 0.3s ease;
+  }
+
+  /* Christmas-themed button hover effects */
+  button.bg-primary:hover {
+    background: linear-gradient(135deg, 
+      hsl(var(--christmas-red)), 
+      hsl(var(--christmas-green)));
+    transition: background 0.3s ease;
+  }
+
+  /* Christmas-themed link colors */
+  a:hover {
+    color: hsl(var(--christmas-red));
+    transition: color 0.2s ease;
+  }
+
+  /* Subtle Christmas border on focus */
+  *:focus-visible {
+    outline-color: hsl(var(--christmas-red));
+  }
 }
 
 @layer base {
@@ -270,6 +386,10 @@ body {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    /* Christmas colors */
+    --christmas-red: 0 84% 50%;
+    --christmas-green: 142 76% 36%;
+    --christmas-gold: 43 96% 56%;
   }
   .dark {
     --background: 0 0% 3.9%;
@@ -278,24 +398,28 @@ body {
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --primary: 0 84% 50%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 142 76% 36%;
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
+    --accent: 142 76% 36%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
+    --border: 142 76% 20%;
     --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --ring: 0 84% 50%;
+    --chart-1: 0 84% 50%;
+    --chart-2: 142 76% 36%;
+    --chart-3: 43 96% 56%;
+    --chart-4: 0 84% 50%;
+    --chart-5: 142 76% 36%;
+    /* Christmas colors */
+    --christmas-red: 0 84% 50%;
+    --christmas-green: 142 76% 36%;
+    --christmas-gold: 43 96% 56%;
   }
 }
 

app/layout.tsx

@@ -6,6 +6,7 @@ import type React from "react"
 import { NotificationProvider } from "@/lib/notification-context"
 import { Metadata, Viewport } from "next"
 import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper"
+import { ChristmasDecorations } from "@/components/christmas-decorations"
 
 const inter = Inter({ subsets: ["latin"] })
   
@@ -74,6 +75,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
           <NotificationProvider>
+            <ChristmasDecorations />
             <Toaster 
               theme="dark" 
               richColors