fix: dark mode and glassmorphism theme in Tailwind v4

- Add @custom-variant dark for proper dark mode support in Tailwind v4
- Create CSS classes for theme backgrounds (theme-neo-*, theme-glass-*)
- Fix ThemeWrapper to use CSS classes instead of inline gradient syntax
- Fix Groups page card styling for dark/light mode in both themes

Author: Devasy

web/components/layout/ThemeWrapper.tsx

@@ -8,12 +8,12 @@ export const ThemeWrapper = ({ children }: { children: React.ReactNode }) => {
   let bgClass = "";
 
   if (style === THEMES.NEOBRUTALISM) {
-    bgClass = mode === 'dark' ? 'bg-[#1a1a1a] text-white' : 'bg-[#fffdf5] text-black'; // Off-yellowish white for Neo Light
+    bgClass = mode === 'dark' ? 'theme-neo-dark text-white' : 'theme-neo-light text-black';
   } else {
     // Glassmorphism - Vibrant gradients
     bgClass = mode === 'dark' 
-      ? 'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-900 via-slate-900 to-black text-white' 
-      : 'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-purple-100 to-white text-gray-900';
+      ? 'theme-glass-dark text-white' 
+      : 'theme-glass-light text-gray-900';
   }
 
   return (

web/pages/Groups.tsx

@@ -125,8 +125,8 @@ export const Groups = () => {
                 onClick={() => navigate(`/groups/${group._id}`)}
                 className={`group cursor-pointer transition-all duration-300 relative overflow-hidden flex flex-col h-full
                   ${style === THEMES.NEOBRUTALISM 
-                    ? 'border-2 border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]' 
-                    : 'rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-white/10 shadow-lg'}
+                    ? `border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] ${mode === 'dark' ? 'bg-zinc-800' : 'bg-white'}` 
+                    : `rounded-2xl border shadow-lg backdrop-blur-md ${mode === 'dark' ? 'border-white/20 bg-white/10 hover:bg-white/15' : 'border-black/10 bg-white/60 hover:bg-white/80'}`}
                 `}
               >
                 <div className={`h-24 w-full flex items-center px-6 relative overflow-hidden ${style === THEMES.NEOBRUTALISM ? 'bg-neo-main border-b-2 border-black' : 'bg-gradient-to-r from-blue-500/20 to-purple-500/20'}`}>

web/src/index.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --font-sans: 'Inter', sans-serif;
   --font-mono: 'Space Grotesk', monospace;
@@ -11,6 +13,23 @@
   --color-neo-dark: #1a1a1a;
 }
 
+/* Theme backgrounds */
+.theme-neo-light {
+  background-color: #fffdf5;
+}
+
+.theme-neo-dark {
+  background-color: #1a1a1a;
+}
+
+.theme-glass-light {
+  background: radial-gradient(ellipse at top right, #c7d2fe, #e9d5ff, #ffffff);
+}
+
+.theme-glass-dark {
+  background: radial-gradient(ellipse at top right, #312e81, #0f172a, #000000);
+}
+
 /* Scrollbar hiding for cleaner UI */
 .no-scrollbar::-webkit-scrollbar {
   display: none;