Implement dark theme redesign

Adopt Cosmos blue-violet cyan themed dark UI across app:
- Update Navigation styling to gradient header with glow and bottom accent bar
- Replace and enhance Auth, Home, Domains, Discover pages with glassmorphism, gradient borders, and mesh background
- Update Card and Button components to support new glass and glow effects
- Extend Tailwind config and index CSS with new color tokens, gradients, and animations
- Apply consistent dark theme across pages for a premium, unique CodeKick look

X-Lovable-Edit-ID: edt-fd6d66b5-7f5b-4fe0-ab92-29a933891707

Author: lovable-dev[bot]

src/components/Navigation.tsx

@@ -5,7 +5,6 @@ import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { Button } from '@/components/ui/button';
 import { ThemeToggle } from '@/components/ThemeToggle';
-import { Badge } from '@/components/ui/badge';
 import {
   Tooltip,
   TooltipContent,
@@ -39,27 +38,31 @@ export const Navigation = () => {
   };
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-card/80 backdrop-blur-lg border-b border-border">
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-2xl border-b border-border/50">
+      {/* Gradient accent line at bottom */}
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
+      
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <button
             onClick={() => navigate('/')}
-            className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
+            className="flex items-center space-x-2 group"
           >
-            <div className="w-10 h-10 bg-gradient-primary rounded-lg flex items-center justify-center">
-              <span className="text-white font-bold text-xl">CK</span>
+            <div className="w-10 h-10 bg-gradient-primary rounded-lg flex items-center justify-center shadow-glow-sm group-hover:shadow-glow transition-all duration-300 group-hover:scale-105">
+              <span className="text-primary-foreground font-bold text-xl">CK</span>
             </div>
-            <span className="text-xl font-bold bg-gradient-primary bg-clip-text text-transparent">
+            <span className="text-xl font-bold text-gradient">
               CodeKick
             </span>
           </button>
 
           {user && (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => navigate('/domains')}
+                className="text-muted-foreground hover:text-foreground"
               >
                 <Home className="w-4 h-4 mr-2" />
                 Domains
@@ -68,6 +71,7 @@ export const Navigation = () => {
                 variant="ghost"
                 size="sm"
                 onClick={() => navigate('/discover')}
+                className="text-muted-foreground hover:text-foreground"
               >
                 <Search className="w-4 h-4 mr-2" />
                 Discover
@@ -80,15 +84,15 @@ export const Navigation = () => {
                       variant="ghost"
                       size="sm"
                       onClick={() => navigate('/verify-phone')}
-                      className="relative"
+                      className="relative text-muted-foreground hover:text-foreground"
                     >
                       <Phone className="w-4 h-4" />
                       {phoneVerified !== null && (
                         <span className="absolute -top-1 -right-1">
                           {phoneVerified ? (
-                            <CheckCircle className="w-3 h-3 text-green-500" />
+                            <CheckCircle className="w-3 h-3 text-success" />
                           ) : (
-                            <AlertCircle className="w-3 h-3 text-yellow-500" />
+                            <AlertCircle className="w-3 h-3 text-accent" />
                           )}
                         </span>
                       )}
@@ -103,6 +107,7 @@ export const Navigation = () => {
                 variant="ghost"
                 size="sm"
                 onClick={() => navigate('/profile')}
+                className="text-muted-foreground hover:text-foreground"
               >
                 <User className="w-4 h-4 mr-2" />
                 Profile
@@ -111,6 +116,7 @@ export const Navigation = () => {
                 variant="ghost"
                 size="sm"
                 onClick={signOut}
+                className="text-muted-foreground hover:text-foreground"
               >
                 <LogOut className="w-4 h-4 mr-2" />
                 Sign Out

src/components/ui/button.tsx

@@ -5,16 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-glow-sm",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent/10 hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        glow: "bg-gradient-primary text-primary-foreground shadow-glow-sm hover:shadow-glow-lg hover:scale-105",
+        accent: "bg-accent text-accent-foreground hover:bg-accent/90 hover:shadow-accent-glow",
       },
       size: {
         default: "h-10 px-4 py-2",

src/components/ui/card.tsx

@@ -1,10 +1,38 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
-));
+const cardVariants = cva(
+  "rounded-lg border text-card-foreground transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-card shadow-sm",
+        glass: "glass-card",
+        bordered: "gradient-border bg-card",
+        elevated: "bg-card shadow-card-hover hover:shadow-elegant",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant, className }))}
+      {...props}
+    />
+  )
+);
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
@@ -40,4 +68,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };

src/index.css

@@ -27,7 +27,7 @@ All colors MUST be HSL.
     --muted: 220 20% 90%;
     --muted-foreground: 220 20% 45%;
 
-    --accent: 270 80% 65%;
+    --accent: 185 90% 45%;
     --accent-foreground: 0 0% 100%;
 
     --success: 142 76% 36%;
@@ -44,6 +44,7 @@ All colors MUST be HSL.
 
     /* Gradients */
     --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(270 80% 65%));
+    --gradient-accent: linear-gradient(135deg, hsl(217 91% 60%), hsl(185 90% 45%));
     --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 25% 97%));
     --gradient-hero: linear-gradient(135deg, hsl(217 91% 60% / 0.1), hsl(270 80% 65% / 0.05));
 
@@ -57,45 +58,58 @@ All colors MUST be HSL.
   }
 
   .dark {
-    --background: 220 60% 5%;
-    --foreground: 220 25% 95%;
+    /* Near-black background for premium feel */
+    --background: 220 20% 4%;
+    --foreground: 220 10% 98%;
 
-    --card: 220 50% 8%;
-    --card-foreground: 220 25% 95%;
+    /* Elevated card surfaces */
+    --card: 220 15% 7%;
+    --card-foreground: 220 10% 98%;
 
-    --popover: 220 50% 8%;
-    --popover-foreground: 220 25% 95%;
+    --popover: 220 15% 8%;
+    --popover-foreground: 220 10% 98%;
 
+    /* Vibrant primary blue */
     --primary: 217 91% 60%;
     --primary-foreground: 0 0% 100%;
     --primary-glow: 217 91% 75%;
 
-    --secondary: 220 40% 15%;
-    --secondary-foreground: 220 25% 95%;
+    /* Dark secondary */
+    --secondary: 220 20% 12%;
+    --secondary-foreground: 220 10% 95%;
 
-    --muted: 220 40% 15%;
-    --muted-foreground: 220 20% 60%;
+    /* Muted elements */
+    --muted: 220 15% 14%;
+    --muted-foreground: 220 10% 55%;
 
-    --accent: 270 80% 65%;
-    --accent-foreground: 0 0% 100%;
+    /* Electric cyan accent */
+    --accent: 185 90% 55%;
+    --accent-foreground: 0 0% 0%;
 
-    --success: 142 76% 36%;
+    --success: 142 76% 42%;
     --success-foreground: 0 0% 100%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 220 25% 95%;
+    --destructive: 0 62.8% 50%;
+    --destructive-foreground: 220 10% 98%;
 
-    --border: 220 40% 20%;
-    --input: 220 40% 20%;
+    /* Subtle borders */
+    --border: 220 15% 14%;
+    --input: 220 15% 14%;
     --ring: 217 91% 60%;
 
-    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(270 80% 65%));
-    --gradient-card: linear-gradient(180deg, hsl(220 50% 8%), hsl(220 60% 5%));
-    --gradient-hero: linear-gradient(135deg, hsl(217 91% 60% / 0.15), hsl(270 80% 65% / 0.08));
+    /* Enhanced dark gradients */
+    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(270 80% 65%), hsl(185 90% 55%));
+    --gradient-accent: linear-gradient(135deg, hsl(185 90% 55%), hsl(217 91% 60%));
+    --gradient-card: linear-gradient(145deg, hsl(220 15% 9%), hsl(220 20% 4%));
+    --gradient-hero: linear-gradient(135deg, hsl(217 91% 60% / 0.12), hsl(270 80% 65% / 0.08), hsl(185 90% 55% / 0.06));
 
-    --shadow-elegant: 0 10px 40px -10px hsl(217 91% 60% / 0.3);
-    --shadow-card: 0 4px 20px -2px hsl(0 0% 0% / 0.3);
-    --shadow-glow: 0 0 80px hsl(217 91% 75% / 0.3);
+    /* Animated border gradient */
+    --gradient-border: linear-gradient(90deg, hsl(217 91% 60%), hsl(270 80% 65%), hsl(185 90% 55%), hsl(217 91% 60%));
+    
+    /* Enhanced glow effects */
+    --shadow-elegant: 0 10px 40px -10px hsl(217 91% 60% / 0.25);
+    --shadow-card: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
+    --shadow-glow: 0 0 80px hsl(217 91% 60% / 0.2), 0 0 120px hsl(185 90% 55% / 0.1);
   }
 }
 
@@ -109,3 +123,111 @@ All colors MUST be HSL.
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 }
+
+@layer components {
+  /* Glassmorphism card effect */
+  .glass-card {
+    @apply bg-card/70 backdrop-blur-xl border border-border/50;
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .dark .glass-card {
+    @apply bg-card/60;
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+
+  /* Animated gradient border effect */
+  .gradient-border {
+    position: relative;
+    background: hsl(var(--card));
+    border-radius: var(--radius);
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: var(--gradient-border, var(--gradient-primary));
+    background-size: 300% 300%;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+    opacity: 0.4;
+    transition: opacity 0.4s ease;
+    animation: gradient-shift 4s ease infinite;
+  }
+
+  .gradient-border:hover::before {
+    opacity: 1;
+  }
+
+  /* Background mesh gradient pattern */
+  .bg-mesh {
+    background-image: 
+      radial-gradient(at 40% 20%, hsl(217 91% 60% / 0.12) 0px, transparent 50%),
+      radial-gradient(at 80% 0%, hsl(270 80% 65% / 0.08) 0px, transparent 50%),
+      radial-gradient(at 0% 50%, hsl(185 90% 55% / 0.06) 0px, transparent 50%),
+      radial-gradient(at 80% 80%, hsl(217 91% 60% / 0.05) 0px, transparent 40%);
+  }
+
+  /* Text gradient enhancement */
+  .text-gradient {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Glow effect for buttons and interactive elements */
+  .glow-effect {
+    box-shadow: 0 0 20px hsl(217 91% 60% / 0.3);
+    transition: box-shadow 0.3s ease;
+  }
+
+  .glow-effect:hover {
+    box-shadow: 0 0 40px hsl(217 91% 60% / 0.5), 0 0 60px hsl(185 90% 55% / 0.2);
+  }
+
+  /* Accent glow */
+  .accent-glow {
+    box-shadow: 0 0 20px hsl(185 90% 55% / 0.3);
+  }
+
+  .accent-glow:hover {
+    box-shadow: 0 0 40px hsl(185 90% 55% / 0.5);
+  }
+
+  /* Shimmer effect for loading states */
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--muted-foreground) / 0.1) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+}
+
+@layer utilities {
+  /* 3D transform utilities for card flips */
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  
+  .preserve-3d {
+    transform-style: preserve-3d;
+  }
+  
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+}