ui color branding :')

src/App.tsx

···
 import { useSearch } from "./hooks/useSearch";
 import { useFollow } from "./hooks/useFollows";
 import { useFileUpload } from "./hooks/useFileUpload";
+import { useTheme } from "./hooks/useTheme";
+import ThemeControls from "./components/ThemeControls";
+import Firefly from "./components/Firefly";
+
 
 export default function App() {
   // Auth hook
···
     login,
     logout,
   } = useAuth();
+
+  // Theme hook
+  const { isDark, reducedMotion, toggleTheme, toggleMotion } = useTheme();
 
   // Add state to track current platform
   const [currentPlatform, setCurrentPlatform] = useState<string>('tiktok');
···
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800">
+    <div className="min-h-screen relative overflow-hidden">
+      {/* Firefly particles - only render if motion not reduced */}
+      {!reducedMotion && (
+        <div className="fixed inset-0 pointer-events-none" aria-hidden="true">
+          {[...Array(15)].map((_, i) => (
+            <Firefly key={i} delay={i * 0.5} duration={3 + Math.random() * 2} />
+          ))}
+        </div>
+      )}
+
+      {/* Status message for screen readers */}
       <div 
         role="status" 
         aria-live="polite" 
···
         {statusMessage}
       </div>
 
+      {/* Skip to main content link */}
       <a 
         href="#main-content" 
-        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-blue-600 focus:text-white focus:px-4 focus:py-2 focus:rounded-lg"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-firefly-orange focus:text-white focus:px-4 focus:py-2 focus:rounded-lg"
       >
         Skip to main content
       </a>
···
         {currentStep === 'checking' && (
           <div className="p-6 max-w-md mx-auto mt-8">
             <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 text-center space-y-4">
-              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl mx-auto flex items-center justify-center">
+              <div className="w-16 h-16 bbg-firefly-banner dark:bg-firefly-banner-dark text-white rounded-2xl mx-auto flex items-center justify-center">
                 <ArrowRight className="w-8 h-8 text-white animate-pulse" />
               </div>
               <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Loading...</h2>
···
             onSubmit={handleLogin}
             session={session}
             onNavigate={setCurrentStep}
+            reducedMotion={reducedMotion}
           />
         )}
 
···
             onFileUpload={processFileUpload}
             onLoadUpload={handleLoadUpload}
             currentStep={currentStep}
+            reducedMotion={reducedMotion}
+            isDark={isDark}
+            onToggleTheme={toggleTheme}
+            onToggleMotion={toggleMotion}
           />
         )}
 
···
             searchProgress={searchProgress}
             currentStep={currentStep}
             sourcePlatform={currentPlatform}
+            isDark={isDark}
+            onToggleTheme={toggleTheme}
+            onToggleMotion={toggleMotion}
           />
         )}
 
···
             isFollowing={isFollowing}
             currentStep={currentStep}
             sourcePlatform={currentPlatform}
+            reducedMotion={reducedMotion}
+            isDark={isDark}
+            onToggleTheme={toggleTheme}
+            onToggleMotion={toggleMotion}
           />
         )}
       </main>

src/components/AppHeader.tsx

···
 import { useState, useEffect, useRef } from "react";
 import { Heart, Home, LogOut, ChevronDown } from "lucide-react";
+import ThemeControls from "./ThemeControls";
 
 interface atprotoSession {
   did: string;
···
   onLogout: () => void;
   onNavigate: (step: 'home' | 'login') => void;
   currentStep: string;
+  isDark?: boolean;
+  reducedMotion?: boolean;
+  onToggleTheme?: () => void;
+  onToggleMotion?: () => void;
 }
 
-export default function AppHeader({ session, onLogout, onNavigate, currentStep }: AppHeaderProps) {
+export default function AppHeader({ 
+  session, 
+  onLogout, 
+  onNavigate, 
+  currentStep,
+  isDark = false,
+  reducedMotion = false,
+  onToggleTheme,
+  onToggleMotion
+}: AppHeaderProps) {
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
···
   }, []);
 
   return (
-    <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+    <div className="bg-white/95 dark:bg-slate-800/95 border-b-2 border-slate-200 dark:border-slate-700 backdrop-blur-sm relative z-[100]">
       <div className="max-w-6xl mx-auto px-4 py-3">
         <div className="flex items-center justify-between">
-          <button onClick={() => onNavigate(session ? 'home' : 'login')} className="flex items-center space-x-3 hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-lg px-2 py-1">
-            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
-              <Heart className="w-5 h-5 text-white" />
+          <button 
+            onClick={() => onNavigate(session ? 'home' : 'login')} 
+            className="flex items-center space-x-3 hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-firefly-orange rounded-lg px-2 py-1"
+          >
+            <div className="w-10 h-10 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
+              <Heart className="w-5 h-5 text-slate-900" />
             </div>
-            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">ATlast</h1>
+            <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">ATlast</h1>
           </button>
 
-          {session && (
-            <div className="relative" ref={menuRef}>
-              <button onClick={() => setShowMenu(!showMenu)} className="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
-                {session?.avatar ? (
-                  <img src={session.avatar} alt="" className="w-8 h-8 rounded-full object-cover" />
-                ) : (
-                  <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
-                    <span className="text-white font-bold text-sm">{session?.handle?.charAt(0).toUpperCase()}</span>
+          <div className="flex items-center space-x-4">
+            {onToggleTheme && onToggleMotion && (
+              <ThemeControls
+                isDark={isDark}
+                reducedMotion={reducedMotion}
+                onToggleTheme={onToggleTheme}
+                onToggleMotion={onToggleMotion}
+              />
+            )}
+            {session && (
+              <div className="relative z-[9999]" ref={menuRef}>
+                <button 
+                  onClick={() => setShowMenu(!showMenu)} 
+                  className="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-firefly-orange"
+                >
+                  {session?.avatar ? (
+                    <img src={session.avatar} alt="" className="w-8 h-8 rounded-full object-cover" />
+                  ) : (
+                    <div className="w-8 h-8 bg-gradient-to-br from-firefly-cyan to-blue-500 rounded-full flex items-center justify-center shadow-sm">
+                      <span className="text-white font-bold text-sm">{session?.handle?.charAt(0).toUpperCase()}</span>
+                    </div>
+                  )}
+                  <span className="text-sm font-medium text-slate-900 dark:text-slate-100 hidden sm:inline">@{session?.handle}</span>
+                  <ChevronDown className={`w-4 h-4 text-slate-600 dark:text-slate-400 transition-transform ${showMenu ? 'rotate-180' : ''}`} />
+                </button>
+
+                {showMenu && (
+                  <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border-2 border-slate-200 dark:border-slate-700 py-2 z-[9999]">
+                    <div className="px-4 py-3 border-b-2 border-slate-200 dark:border-slate-700">
+                      <div className="font-semibold text-slate-900 dark:text-slate-100">{session?.displayName || session.handle}</div>
+                      <div className="text-sm text-slate-600 dark:text-slate-400">@{session?.handle}</div>
+                    </div>
+                    <button 
+                      onClick={() => { setShowMenu(false); onNavigate('home'); }} 
+                      className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-left"
+                    >
+                      <Home className="w-4 h-4 text-slate-600 dark:text-slate-400" />
+                      <span className="text-slate-900 dark:text-slate-100">Dashboard</span>
+                    </button>
+                    <button 
+                      onClick={() => { setShowMenu(false); onNavigate('login'); }} 
+                      className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-left"
+                    >
+                      <Heart className="w-4 h-4 text-slate-600 dark:text-slate-400" />
+                      <span className="text-slate-900 dark:text-slate-100">About</span>
+                    </button>
+                    <div className="border-t-2 border-slate-200 dark:border-slate-700 my-2"></div>
+                    <button 
+                      onClick={() => { setShowMenu(false); onLogout(); }} 
+                      className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left text-red-600 dark:text-red-400"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      <span>Log out</span>
+                    </button>
                   </div>
                 )}
-                <span className="text-sm font-medium text-gray-900 dark:text-gray-100 hidden sm:inline">@{session?.handle}</span>
-                <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${showMenu ? 'rotate-180' : ''}`} />
-              </button>
-
-              {showMenu && (
-                <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
-                  <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-                    <div className="font-medium text-gray-900 dark:text-gray-100">{session?.displayName || session.handle}</div>
-                    <div className="text-sm text-gray-500 dark:text-gray-400">@{session?.handle}</div>
-                  </div>
-                  <button onClick={() => { setShowMenu(false); onNavigate('home'); }} className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-left">
-                    <Home className="w-4 h-4 text-gray-500" />
-                    <span className="text-gray-900 dark:text-gray-100">Dashboard</span>
-                  </button>
-                  <button onClick={() => { setShowMenu(false); onNavigate('login'); }} className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-left">
-                    <Heart className="w-4 h-4 text-gray-500" />
-                    <span className="text-gray-900 dark:text-gray-100">About</span>
-                  </button>
-                  <div className="border-t border-gray-200 dark:border-gray-700 my-2"></div>
-                  <button onClick={() => { setShowMenu(false); onLogout(); }} className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left text-red-600 dark:text-red-400">
-                    <LogOut className="w-4 h-4" />
-                    <span>Log out</span>
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/Firefly.tsx

···
+interface FireflyProps {
+  delay?: number;
+  duration?: number;
+}
+
+export default function Firefly({ delay = 0, duration = 3 }: FireflyProps) {
+  const style = {
+    animation: `float ${duration}s ease-in-out ${delay}s infinite`,
+    left: `${Math.random() * 100}%`,
+    top: `${Math.random() * 100}%`,
+  };
+
+  return (
+    <div 
+      className="absolute w-1 h-1 bg-firefly-amber dark:bg-firefly-glow rounded-full opacity-40 pointer-events-none"
+      style={style}
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 bg-firefly-glow dark:bg-firefly-amber rounded-full animate-pulse blur-sm" />
+    </div>
+  );
+}

src/components/SearchResultCard.tsx

···
   return (
     <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
       {/* Source User */}
-      <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+      <div className="px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border-b-2 border-slate-200 dark:border-slate-700">
         <div className="flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">
-            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-              <span className="font-bold text-gray-900 dark:text-gray-100 truncate">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span className="font-bold text-slate-900 dark:text-slate-100 truncate text-base">
                 @{result.sourceUser.username}
               </span>
-              <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+              <span className="text-sm text-slate-700 dark:text-slate-300 whitespace-nowrap">
                 from {platform.name}
               </span>
             </div>
           </div>
-          <div className={`text-xs px-2 py-1 rounded-full ${platform.accentBg} text-white whitespace-nowrap flex-shrink-0`}>
+          <div className={`text-xs px-2 py-1 rounded-full bg-indigo-700 dark:bg-pink-700/70 text-white whitespace-nowrap flex-shrink-0`}>
             {result.atprotoMatches.length} {result.atprotoMatches.length === 1 ? 'match' : 'matches'}
           </div>
         </div>
···
                   {match.avatar ? (
                     <img 
                       src={match.avatar} 
-                      alt="User avatar, description not provided"
+                      alt="User avatar"
                       className="w-12 h-12 rounded-full object-cover flex-shrink-0"
                     />
                   ) : (
···
                         {match.displayName}
                       </div>
                     )}
-                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                    <div className="text-sm text-gray-800 dark:text-gray-200">
                       @{match.handle}
                     </div>
                     {match.description && (
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{match.description}</div>
+                      <div className="text-sm text-gray-700 dark:text-gray-300 mt-1 line-clamp-2">{match.description}</div>
                     )}
                     {(match.postCount || match.followerCount) && (
-                      <div className="flex items-center space-x-3 mt-2 text-xs text-gray-500 dark:text-gray-400">
+                      <div className="flex items-center space-x-3 mt-2 text-xs text-gray-700 dark:text-gray-300">
                         {match.postCount && match.postCount > 0 && (
                           <span>{match.postCount.toLocaleString()} posts</span>
                         )}
···
                       isFollowed
                         ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 cursor-not-allowed opacity-60'
                         : isSelected
-                        ? 'bg-blue-600 text-white'
-                        : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
+                        ? 'bg-cyan-500 dark:bg-cyan-300 text-white dark:text-slate-700 shadow-md'
+                        : 'bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-600'
                     }`}
                     title={isFollowed ? 'Already followed' : isSelected ? 'Selected to follow' : 'Select to follow'}
                   >
···
             {hasMoreMatches && (
               <button
                 onClick={onToggleExpand}
-                className="w-full py-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors flex items-center justify-center space-x-1"
+                className="w-full py-2 text-sm text-cyan-700 hover:text-cyan-900 dark:text-cyan-400 dark:hover:text-cyan-200 font-medium transition-colors flex items-center justify-center space-x-1"
               >
-                <span>{isExpanded ? 'Show less' : `Show ${result.atprotoMatches.length - 1} more ${result.atprotoMatches.length - 1 === 1 ? 'match' : 'matches'}`}</span>
+                <span>{isExpanded ? 'Show less' : `Show ${result.atprotoMatches.length - 1} more ${result.atprotoMatches.length - 1 === 1 ? 'option' : 'options'}`}</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
               </button>
             )}

src/components/ThemeControls.tsx

···
+import { Sun, Moon, Pause, Play } from 'lucide-react';
+
+interface ThemeControlsProps {
+  isDark: boolean;
+  reducedMotion: boolean;
+  onToggleTheme: () => void;
+  onToggleMotion: () => void;
+}
+
+export default function ThemeControls({ 
+  isDark, 
+  reducedMotion, 
+  onToggleTheme, 
+  onToggleMotion 
+}: ThemeControlsProps) {
+  return (
+    <div className="flex items-center space-x-2">
+      <button
+        onClick={onToggleMotion}
+        className="p-2 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-700 transition-colors shadow-lg"
+        aria-label={reducedMotion ? "Enable animations" : "Reduce motion"}
+        title={reducedMotion ? "Enable animations" : "Reduce motion"}
+      >
+        {reducedMotion ? (
+          <Play className="w-5 h-5 text-slate-700 dark:text-slate-300" />
+        ) : (
+          <Pause className="w-5 h-5 text-slate-700 dark:text-slate-300" />
+        )}
+      </button>
+      <button
+        onClick={onToggleTheme}
+        className="p-2 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-700 transition-colors shadow-lg"
+        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      >
+        {isDark ? (
+          <Sun className="w-5 h-5 text-firefly-amber" />
+        ) : (
+          <Moon className="w-5 h-5 text-slate-700" />
+        )}
+      </button>
+    </div>
+  );
+}

src/hooks/useTheme.ts

···
+import { useState, useEffect } from 'react';
+
+export function useTheme() {
+  const [isDark, setIsDark] = useState(() => {
+    // Check localStorage first, then system preference
+    const stored = localStorage.getItem('theme');
+    if (stored) return stored === 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  const [reducedMotion, setReducedMotion] = useState(() => {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  });
+
+  useEffect(() => {
+    // Apply theme to document
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
+
+  useEffect(() => {
+    // Listen for system motion preference changes
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  const toggleTheme = () => setIsDark(!isDark);
+  const toggleMotion = () => setReducedMotion(!reducedMotion);
+
+  return { isDark, reducedMotion, toggleTheme, toggleMotion };
+}

src/index.css

···
 @layer base {
   body {
     font-family: system-ui, sans-serif;
-    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+    @apply bg-gradient-to-br from-amber-50 via-orange-50 to-pink-50 
+           dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900 
+           text-slate-900 dark:text-slate-100 
+           transition-colors duration-300;
   }
   
   button {
     cursor: pointer;
+  }
+}
+
+/* Firefly animation keyframes */
+@keyframes float {
+  0%, 100% { 
+    transform: translate(0, 0) scale(1); 
+    opacity: 0.3; 
+  }
+  25% { 
+    transform: translate(10px, -20px) scale(1.2); 
+    opacity: 0.8; 
+  }
+  50% { 
+    transform: translate(-5px, -40px) scale(1); 
+    opacity: 0.5; 
+  }
+  75% { 
+    transform: translate(15px, -25px) scale(1.1); 
+    opacity: 0.9; 
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { 
+    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); 
+  }
+  50% { 
+    box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3); 
   }
 }

src/pages/Home.tsx

···
-import { Upload, History, FileText } from "lucide-react";
+import { Upload, History, FileText, Sparkles } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 import AppHeader from "../components/AppHeader";
 import PlatformSelector from "../components/PlatformSelector";
···
   onFileUpload: (e: React.ChangeEvent<HTMLInputElement>, platform: string) => void;
   onLoadUpload: (uploadId: string) => void;
   currentStep: string;
+  reducedMotion?: boolean;
+  isDark?: boolean;
+  onToggleTheme?: () => void;
+  onToggleMotion?: () => void;
 }
 
 export default function HomePage({ 
···
   onNavigate, 
   onFileUpload, 
   onLoadUpload,
-  currentStep 
+  currentStep,
+  reducedMotion = false,
+  isDark = false,
+  onToggleTheme,
+  onToggleMotion
 }: HomePageProps) {
   const [uploads, setUploads] = useState<UploadType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
···
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-      <AppHeader session={session} onLogout={onLogout} onNavigate={onNavigate} currentStep={currentStep} />
+    <div className="min-h-screen">
+      <AppHeader 
+        session={session} 
+        onLogout={onLogout} 
+        onNavigate={onNavigate} 
+        currentStep={currentStep}
+        isDark={isDark}
+        reducedMotion={reducedMotion}
+        onToggleTheme={onToggleTheme}
+        onToggleMotion={onToggleMotion}
+      />
 
       <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
         {/* Upload Section */}
-        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+        <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
           <div className="flex items-center space-x-3 mb-4">
-            <Upload className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
-              Upload Following Data
-            </h2>
+            <div 
+              className={`w-12 h-12 bg-gradient-to-br from-firefly-amber to-firefly-orange rounded-xl flex items-center justify-center shadow-md ${
+                reducedMotion ? '' : 'animate-glow-pulse'
+              }`}
+            >
+              <Upload className="w-6 h-6 text-slate-900" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                Light Up Your Network
+              </h2>
+              <p className="text-sm text-slate-700 dark:text-slate-300">
+                Upload your data to find your fireflies
+              </p>
+            </div>
           </div>
-          <p className="text-gray-600 dark:text-gray-400 mb-6">
-            Click a platform below to upload your exported data and find matches on the ATmosphere
+          <p className="text-slate-700 dark:text-slate-300 mb-6">
+            Click a platform below to upload your exported data and discover matches in the ATmosphere
           </p>
   
           <PlatformSelector onPlatformSelect={handlePlatformSelect} />
···
             aria-label="Upload following data file"
           />
           
-          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
-            <p className="text-sm text-blue-900 dark:text-blue-300">
-              💡 <strong>How to get your data:</strong>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border-2 border-blue-200 dark:border-blue-800/30">
+            <p className="text-sm text-blue-900 dark:text-blue-300 font-semibold">
+              💡 How to get your data:
             </p>
             <p className="text-sm text-blue-900 dark:text-blue-300 mt-2">
               <strong>TikTok:</strong> Profile → Settings → Account → Download your data → Upload Following.txt
···
         </div>
 
         {/* Upload History Section */}
-        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+        <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
           <div className="flex items-center space-x-3 mb-6">
-            <History className="w-6 h-6 text-purple-600 dark:text-purple-400" />
-            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
-              Previous Uploads
+            <Sparkles className="w-6 h-6 text-firefly-amber" />
+            <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+              Your Light Trail
             </h2>
           </div>
 
           {isLoading ? (
             <div className="space-y-3">
               {[...Array(3)].map((_, i) => (
-                <div key={i} className="animate-pulse flex items-center space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl">
-                  <div className="w-12 h-12 bg-gray-200 dark:bg-gray-600 rounded-xl" />
+                <div key={i} className="animate-pulse flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-700 rounded-xl">
+                  <div className="w-12 h-12 bg-slate-200 dark:bg-slate-600 rounded-xl" />
                   <div className="flex-1 space-y-2">
-                    <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4" />
-                    <div className="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2" />
+                    <div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4" />
+                    <div className="h-3 bg-slate-200 dark:bg-slate-600 rounded w-1/2" />
                   </div>
                 </div>
               ))}
             </div>
           ) : uploads.length === 0 ? (
             <div className="text-center py-12">
-              <FileText className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
-              <p className="text-gray-500 dark:text-gray-400">No previous uploads yet</p>
-              <p className="text-sm text-gray-400 dark:text-gray-500 mt-2">
+              <FileText className="w-16 h-16 text-slate-300 dark:text-slate-600 mx-auto mb-4" />
+              <p className="text-slate-600 dark:text-slate-400 font-medium">No previous uploads yet</p>
+              <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
                 Upload your first file to get started
               </p>
             </div>
···
                 <button
                   key={upload.uploadId}
                   onClick={() => onLoadUpload(upload.uploadId)}
-                  className="w-full flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-xl transition-colors text-left"
+                  className="w-full flex items-start space-x-4 p-4 bg-slate-50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange shadow-md hover:shadow-lg"
                 >
-                  <div className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0`}>
-                    <Upload className="w-6 h-6 text-white" />
+                  <div className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}>
+                    <Sparkles className="w-6 h-6 text-white" />
                   </div>
                   <div className="flex-1 min-w-0">
                     <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 mb-1">
-                      <div className="font-semibold text-gray-900 dark:text-gray-100 capitalize">
+                      <div className="font-semibold text-slate-900 dark:text-slate-100 capitalize">
                         {upload.sourcePlatform}
                       </div>
                       <div className="flex items-center gap-2 flex-shrink-0">
-                        <span className="text-xs px-2 py-0.5 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full whitespace-nowrap">
-                          {upload.matchedUsers} {upload.matchedUsers === 1 ? 'match' : 'matches'}
+                        <span className="text-xs px-2 py-0.5 bg-firefly-amber/20 dark:bg-firefly-amber/30 text-amber-900 dark:text-firefly-glow rounded-full font-medium border border-firefly-amber/20 dark:border-firefly-amber/50 whitespace-nowrap">
+                          {upload.matchedUsers} {upload.matchedUsers === 1 ? 'firefly' : 'fireflies'}
                         </span>
-                        <div className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        <div className="text-sm text-slate-600 dark:text-slate-400 font-medium whitespace-nowrap">
                           {Math.round((upload.matchedUsers / upload.totalUsers) * 100)}%
                         </div>
                       </div>
                     </div>
-                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                    <div className="text-sm text-slate-700 dark:text-slate-300">
                       {upload.totalUsers} users • {formatDate(upload.createdAt)}
                     </div>
                   </div>

src/pages/Loading.tsx

···
-import { Search } from "lucide-react";
+import { Search, Sparkles } from "lucide-react";
 import AppHeader from "../components/AppHeader";
 import { PLATFORMS } from "../constants/platforms";
 
···
   searchProgress: SearchProgress;
   currentStep: string;
   sourcePlatform: string;
+  isDark?: boolean;
+  reducedMotion?: boolean;
+  onToggleTheme?: () => void;
+  onToggleMotion?: () => void;
 }
 
-export default function LoadingPage({ session, onLogout, onNavigate, searchProgress, currentStep, sourcePlatform }: LoadingPageProps) {
+export default function LoadingPage({ 
+  session, 
+  onLogout, 
+  onNavigate, 
+  searchProgress, 
+  currentStep, 
+  sourcePlatform,
+  isDark = false,
+  reducedMotion = false,
+  onToggleTheme,
+  onToggleMotion
+}: LoadingPageProps) {
   const platform = PLATFORMS[sourcePlatform] || PLATFORMS.tiktok;
   const PlatformIcon = platform.icon;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-      <AppHeader session={session} onLogout={onLogout} onNavigate={onNavigate} currentStep={currentStep} />
+    <div className="min-h-screen">
+      <AppHeader 
+        session={session} 
+        onLogout={onLogout} 
+        onNavigate={onNavigate} 
+        currentStep={currentStep}
+        isDark={isDark}
+        reducedMotion={reducedMotion}
+        onToggleTheme={onToggleTheme}
+        onToggleMotion={onToggleMotion}
+      />
       
       {/* Platform Banner - Searching State */}
-      <div className={`bg-gradient-to-r ${platform.color} text-white`}>
+      <div className={`bg-firefly-banner dark:bg-firefly-banner-dark text-white`}>
         <div className="max-w-3xl mx-auto px-4 py-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
···
                 <Search className="w-6 h-6 absolute -bottom-1 -right-1 animate-pulse" aria-hidden="true" />
               </div>
               <div>
-                <h2 className="text-xl font-bold">Finding Your People</h2>
+                <h2 className="text-xl font-bold">Finding Your Fireflies</h2>
                 <p className="text-white/90 text-sm">
                   Searching the ATmosphere for {platform.name} follows...
                 </p>
···
       </div>
 
       {/* Progress Stats */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+      <div className="bg-white/95 dark:bg-slate-800/95 border-b-2 border-slate-200 dark:border-slate-700 backdrop-blur-sm">
         <div className="max-w-3xl mx-auto px-4 py-4">
           <div className="grid grid-cols-3 gap-4 text-center mb-4">
             <div>
-              <div className="text-2xl font-bold text-gray-900 dark:text-gray-100" aria-label={`${searchProgress.searched} searched`}>
+              <div className="text-2xl font-bold text-slate-900 dark:text-slate-100" aria-label={`${searchProgress.searched} searched`}>
                 {searchProgress.searched}
               </div>
-              <div className="text-sm text-gray-600 dark:text-gray-300">Searched</div>
+              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">Searched</div>
             </div>
             <div>
-              <div className="text-2xl font-bold text-blue-600 dark:text-blue-400" aria-label={`${searchProgress.found} found`}>
+              <div className="text-2xl font-bold text-firefly-orange" aria-label={`${searchProgress.found} found`}>
                 {searchProgress.found}
               </div>
-              <div className="text-sm text-gray-600 dark:text-gray-300">Found</div>
+              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">Fireflies Found</div>
             </div>
             <div>
-              <div className="text-2xl font-bold text-gray-400 dark:text-gray-500" aria-label={`${searchProgress.total} total`}>
+              <div className="text-2xl font-bold text-slate-600 dark:text-slate-400" aria-label={`${searchProgress.total} total`}>
                 {searchProgress.total}
               </div>
-              <div className="text-sm text-gray-600 dark:text-gray-300">Total</div>
+              <div className="text-sm text-slate-700 dark:text-slate-300 font-medium">Total</div>
             </div>
           </div>
 
           <div 
-            className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3" 
+            className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3" 
             role="progressbar" 
             aria-valuenow={searchProgress.total > 0 ? Math.round((searchProgress.searched / searchProgress.total) * 100) : 0} 
             aria-valuemin={0} 
             aria-valuemax={100}
           >
             <div 
-              className="bg-gradient-to-r from-blue-500 to-purple-600 h-full rounded-full transition-all"
+              className="bg-gradient-to-r from-firefly-amber via-firefly-orange to-firefly-pink h-full rounded-full transition-all"
               style={{ width: `${searchProgress.total > 0 ? (searchProgress.searched / searchProgress.total) * 100 : 0}%` }}
             />
           </div>
···
       {/* Skeleton Results - Matches layout of Results page */}
       <div className="max-w-3xl mx-auto px-4 py-4 space-y-4">
         {[...Array(8)].map((_, i) => (
-          <div key={i} className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden animate-pulse">
+          <div key={i} className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-sm overflow-hidden animate-pulse border-2 border-slate-200 dark:border-slate-700">
             {/* Source User Skeleton */}
-            <div className="p-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+            <div className="p-4 bg-slate-50 dark:bg-slate-900/50 border-b-2 border-slate-200 dark:border-slate-700">
               <div className="flex items-center space-x-3">
-                <div className="w-10 h-10 bg-gray-300 dark:bg-gray-600 rounded-full" />
+                <div className="w-10 h-10 bg-slate-300 dark:bg-slate-600 rounded-full" />
                 <div className="flex-1 space-y-2">
-                  <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-32" />
-                  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+                  <div className="h-4 bg-slate-300 dark:bg-slate-600 rounded w-32" />
+                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-24" />
                 </div>
-                <div className="h-5 w-16 bg-gray-300 dark:bg-gray-600 rounded-full" />
+                <div className="h-5 w-16 bg-slate-300 dark:bg-slate-600 rounded-full" />
               </div>
             </div>
             
             {/* Match Skeleton */}
             <div className="p-4">
-              <div className="flex items-start space-x-3 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20">
-                <div className="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full flex-shrink-0" />
+              <div className="flex items-start space-x-3 p-3 rounded-xl bg-amber-50 dark:bg-amber-900/10 border-2 border-amber-200 dark:border-amber-800/30">
+                <div className="w-12 h-12 bg-slate-300 dark:bg-slate-600 rounded-full flex-shrink-0" />
                 <div className="flex-1 space-y-2">
-                  <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4" />
-                  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
-                  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full" />
-                  <div className="h-5 w-20 bg-green-200 dark:bg-green-900 rounded-full mt-2" />
+                  <div className="h-4 bg-slate-300 dark:bg-slate-600 rounded w-3/4" />
+                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-1/2" />
+                  <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-full" />
+                  <div className="h-5 w-20 bg-slate-300 dark:bg-slate-600 rounded-full mt-2" />
                 </div>
-                <div className="w-20 h-8 bg-gray-300 dark:bg-gray-600 rounded-full flex-shrink-0" />
+                <div className="w-20 h-8 bg-slate-300 dark:bg-slate-600 rounded-full flex-shrink-0" />
               </div>
             </div>
           </div>

src/pages/Login.tsx

···
   onSubmit: (handle: string) => void;
   session?: { handle: string } | null;
   onNavigate?: (step: 'home') => void;
+  reducedMotion?: boolean;
 }
 
-export default function LoginPage({ onSubmit, session, onNavigate }: LoginPageProps) {
+export default function LoginPage({ onSubmit, session, onNavigate, reducedMotion = false }: LoginPageProps) {
   const [handle, setHandle] = useState("");
   
   const handleSubmit = (e: React.FormEvent) => {
···
   };
   
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-850 dark:to-gray-800">
+    <div className="min-h-screen">
       <div className="max-w-6xl mx-auto px-4 py-8 md:py-12">
         
         {/* Hero Section - Side by side on desktop */}
         <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-start mb-12 md:mb-16">
           {/* Left: Welcome */}
           <div className="text-center md:text-left">
-            <div className="inline-flex items-center justify-center w-20 h-20 md:w-24 md:h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-3xl mb-4 md:mb-6 shadow-xl">
-              <Heart className="w-10 h-10 md:w-12 md:h-12 text-white" />
+            <div className="inline-flex items-center justify-center mb-6 relative">
+              <div 
+                className={`w-20 h-20 md:w-24 md:h-24 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-3xl flex items-center justify-center relative shadow-xl ${
+                  reducedMotion ? '' : 'animate-glow-pulse'
+                }`}
+              >
+                <Heart className="w-10 h-10 md:w-12 md:h-12 text-slate-900" aria-hidden="true" />
+                {/* Firefly mascot hint */}
+                <div 
+                  className={`absolute -top-2 -right-2 w-8 h-8 bg-firefly-glow rounded-full flex items-center justify-center shadow-lg ${
+                    reducedMotion ? '' : 'animate-bounce'
+                  }`}
+                  aria-hidden="true"
+                >
+                  <div className="w-4 h-4 bg-firefly-amber rounded-full" />
+                </div>
+              </div>
             </div>
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-3 md:mb-4">
-              Welcome to ATlast
+            
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white mb-3 md:mb-4">
+              ATlast
             </h1>
-            <p className="text-lg md:text-xl lg:text-2xl text-gray-700 dark:text-gray-300 mb-6">
-              Reunite with your community on the ATmosphere
+            <p className="text-lg md:text-xl lg:text-2xl text-slate-800 dark:text-slate-100 mb-2 font-medium">
+              Find Your Light in the ATmosphere
+            </p>
+            <p className="text-slate-700 dark:text-slate-300 mb-6">
+              Reconnect with your internet, one firefly at a time ✨
             </p>
             
+            {/* Decorative firefly trail - only show if motion enabled */}
+            {!reducedMotion && (
+              <div className="mt-8 flex justify-center md:justify-start space-x-2" aria-hidden="true">
+                {[...Array(5)].map((_, i) => (
+                  <div
+                    key={i}
+                    className="w-2 h-2 rounded-full bg-firefly-amber dark:bg-firefly-glow"
+                    style={{
+                      opacity: 1 - i * 0.15,
+                      animation: `float ${2 + i * 0.3}s ease-in-out infinite`,
+                      animationDelay: `${i * 0.2}s`
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+            
             {/* Privacy Notice - visible on mobile */}
             <div className="md:hidden mt-6">
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Your data is processed and stored by our servers if you enable DM notifications. This is to help you find matches and reconnect with your community.
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Your data is processed and stored by our servers. This helps you find matches and reconnect with your community.
               </p>
             </div>
           </div>
···
           {/* Right: Login Card or Dashboard Button */}
           <div className="w-full">
             {session ? (
-              <div className="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border border-gray-100 dark:border-gray-700">
+              <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-3xl shadow-2xl p-8 border-2 border-slate-200 dark:border-slate-700">
                 <div className="text-center mb-6">
-                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
-                    <Heart className="w-8 h-8 text-white" />
+                  <div className="w-16 h-16 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-full mx-auto mb-4 flex items-center justify-center shadow-md">
+                    <Heart className="w-8 h-8 text-slate-900" />
                   </div>
-                  <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                  <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
                     You're logged in!
                   </h2>
-                  <p className="text-gray-600 dark:text-gray-400">
+                  <p className="text-slate-700 dark:text-slate-300">
                     Welcome back, @{session.handle}
                   </p>
                 </div>
 
                 <button
                   onClick={() => onNavigate?.('home')}
-                  className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 focus:outline-none flex items-center justify-center space-x-2"
+                  className="w-full bg-gradient-to-r from-firefly-amber via-firefly-orange to-firefly-pink hover:from-amber-600 hover:via-orange-600 hover:to-pink-600 text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 focus:outline-none flex items-center justify-center space-x-2"
                 >
                   <span>Go to Dashboard</span>
                   <ArrowRight className="w-5 h-5" />
                 </button>
               </div>
             ) : (
-              <div className="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-6 md:p-8 border border-gray-100 dark:border-gray-700">
-                <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 text-center">
-                  Get Started
+              <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-3xl shadow-2xl p-6 md:p-8 border-2 border-slate-200 dark:border-slate-700">
+                <h2 className="text-xl md:text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2 text-center">
+                  Light Up Your Network
                 </h2>
-                <p className="text-gray-600 dark:text-gray-400 text-center mb-6">
+                <p className="text-slate-700 dark:text-slate-300 text-center mb-6">
                   Connect your ATmosphere account to begin
                 </p>
 
                 <form onSubmit={handleSubmit} className="space-y-4" method="post">
                   <div>
-                    <label htmlFor="atproto-handle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    <label htmlFor="atproto-handle" className="block text-sm font-semibold text-slate-900 dark:text-slate-100 mb-2">
                       Your ATmosphere Handle
                     </label>
                     <input
···
                       value={handle}
                       onChange={(e) => setHandle(e.target.value)}
                       placeholder="yourname.bsky.social"
-                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                      className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-900/50 border-2 border-slate-300 dark:border-slate-600 rounded-xl text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-firefly-orange focus:border-transparent transition-all"
                       aria-required="true"
                       aria-describedby="handle-description"
                     />
-                    <p id="handle-description" className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                    <p id="handle-description" className="text-xs text-slate-600 dark:text-slate-400 mt-2">
                       Enter your full ATmosphere handle (e.g., username.bsky.social or yourname.com)
                     </p>
                   </div>
 
                   <button
                     type="submit"
-                    className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 focus:outline-none"
+                    className="w-full bg-gradient-to-r from-firefly-amber via-firefly-orange to-firefly-pink hover:from-amber-600 hover:via-orange-600 hover:to-pink-600 text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 focus:outline-none"
                     aria-label="Connect to the ATmosphere"
                   >
-                    Connect to the ATmosphere
+                    Join the Swarm ✨
                   </button>
                 </form>
 
-                <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-                  <div className="flex items-start space-x-2 text-sm text-gray-600 dark:text-gray-400">
+                <div className="mt-6 pt-6 border-t-2 border-slate-200 dark:border-slate-700">
+                  <div className="flex items-start space-x-2 text-sm text-slate-700 dark:text-slate-300">
                     <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
                     <div>
-                      <p className="font-medium text-gray-700 dark:text-gray-300">Secure OAuth Connection</p>
+                      <p className="font-semibold text-slate-900 dark:text-slate-100">Secure OAuth Connection</p>
                       <p className="text-xs mt-1">We use official AT Protocol OAuth. We never see your password and you can revoke access anytime.</p>
                     </div>
                   </div>
···
 
         {/* Value Props */}
         <div className="grid md:grid-cols-3 gap-4 md:gap-6 mb-12 md:mb-16 max-w-5xl mx-auto">
-          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-100 dark:border-gray-700">
-            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center mb-4">
-              <Upload className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+          <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl p-6 shadow-lg border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange transition-all">
+            <div className="w-12 h-12 bg-gradient-to-br from-firefly-amber to-firefly-orange rounded-xl flex items-center justify-center mb-4 shadow-md">
+              <Upload className="w-6 h-6 text-slate-900" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
-              Upload Your Data
+            <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">
+              Share Your Light
             </h3>
-            <p className="text-gray-600 dark:text-gray-400 text-sm">
-              Import your following lists from Twitter, TikTok, Instagram, and more. Your data stays private.
+            <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
+              Import your following lists. Your data stays private, your connections shine bright.
             </p>
           </div>
 
-          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-100 dark:border-gray-700">
-            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center mb-4">
-              <Search className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+          <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl p-6 shadow-lg border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange transition-all">
+            <div className="w-12 h-12 bg-gradient-to-br from-firefly-cyan to-blue-500 rounded-xl flex items-center justify-center mb-4 shadow-md">
+              <Search className="w-6 h-6 text-slate-900" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
-              Find Matches
+            <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">
+              Find Your Swarm
             </h3>
-            <p className="text-gray-600 dark:text-gray-400 text-sm">
-              We'll search the ATmosphere to find which of your follows have already migrated.
+            <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
+              Watch as fireflies light up - discover which friends have already migrated to the ATmosphere.
             </p>
           </div>
 
-          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-100 dark:border-gray-700">
-            <div className="w-12 h-12 bg-pink-100 dark:bg-pink-900/30 rounded-xl flex items-center justify-center mb-4">
-              <Heart className="w-6 h-6 text-pink-600 dark:text-pink-400" />
+          <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl p-6 shadow-lg border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange transition-all">
+            <div className="w-12 h-12 bg-gradient-to-br from-firefly-pink to-purple-500 rounded-xl flex items-center justify-center mb-4 shadow-md">
+              <Heart className="w-6 h-6 text-slate-900" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
-              Reconnect Instantly
+            <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">
+              Sync Your Glow
             </h3>
-            <p className="text-gray-600 dark:text-gray-400 text-sm">
-              Follow everyone at once or pick and choose. Build your community on the ATmosphere.
+            <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
+              Reconnect instantly. Follow everyone at once or pick and choose - light up together.
             </p>
           </div>
         </div>
 
         {/* Privacy Notice - desktop only */}
         <div className="hidden md:block text-center mb-8">
-          <p className="text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-            Your data is processed and stored by our servers if you enable DM notifications. This is to help you find matches and reconnect with your community.
+          <p className="text-sm text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+            Your data is processed and stored by our servers. This helps you find matches and reconnect with your community.
           </p>
         </div>
 
         {/* How It Works */}
         <div className="max-w-4xl mx-auto">
-          <h2 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-8">
+          <h2 className="text-2xl font-bold text-center text-slate-900 dark:text-slate-100 mb-8">
             How It Works
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div className="text-center">
-              <div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg" aria-hidden="true">
+              <div className="w-12 h-12 bg-firefly-orange text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
                 1
               </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Connect</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Sign in with your ATmosphere account</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Connect</h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">Sign in with your ATmosphere account</p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-purple-500 text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg" aria-hidden="true">
+              <div className="w-12 h-12 bg-firefly-pink text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
                 2
               </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Upload</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Import your following data from other platforms</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Upload</h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">Import your following data from other platforms</p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-pink-500 text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg" aria-hidden="true">
+              <div className="w-12 h-12 bg-firefly-cyan text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
                 3
               </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Match</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">We find your people on the ATmosphere</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Match</h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">We find your fireflies in the ATmosphere</p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-orange-500 text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg" aria-hidden="true">
+              <div className="w-12 h-12 bg-firefly-amber text-slate-900 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
                 4
               </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Follow</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Reconnect with your community</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Follow</h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">Reconnect with your community</p>
             </div>
           </div>
         </div>

src/pages/Results.tsx

···
-import { Video, Heart } from "lucide-react";
+import { Sparkles, Heart } from "lucide-react";
 import { PLATFORMS } from "../constants/platforms";
 import AppHeader from "../components/AppHeader";
 import SearchResultCard from "../components/SearchResultCard";
···
   isFollowing: boolean;
   currentStep: string;
   sourcePlatform: string;
+  reducedMotion?: boolean;
+  isDark?: boolean;
+  onToggleTheme?: () => void;
+  onToggleMotion?: () => void;
 }
 
 export default function ResultsPage({
···
   totalFound,
   isFollowing,
   currentStep,
-  sourcePlatform
+  sourcePlatform,
+  reducedMotion = false,
+  isDark = false,
+  onToggleTheme,
+  onToggleMotion
 }: ResultsPageProps) {
   const platform = PLATFORMS[sourcePlatform] || PLATFORMS.tiktok;
   const PlatformIcon = platform.icon;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-24">
-      <AppHeader session={session} onLogout={onLogout} onNavigate={onNavigate} currentStep={currentStep} />
+    <div className="min-h-screen pb-24">
+      <AppHeader 
+        session={session} 
+        onLogout={onLogout} 
+        onNavigate={onNavigate} 
+        currentStep={currentStep}
+        isDark={isDark}
+        reducedMotion={reducedMotion}
+        onToggleTheme={onToggleTheme}
+        onToggleMotion={onToggleMotion}
+      />
       
       {/* Platform Info Banner */}
-      <div className={`bg-gradient-to-r ${platform.color} text-white`}>
-        <div className="max-w-3xl mx-auto px-4 py-6">
+      <div className="bg-firefly-banner dark:bg-firefly-banner-dark text-white relative overflow-hidden">
+        {!reducedMotion && (
+          <div className="absolute inset-0 opacity-20" aria-hidden="true">
+            {[...Array(10)].map((_, i) => (
+              <div
+                key={i}
+                className="absolute w-1 h-1 bg-white rounded-full"
+                style={{
+                  left: `${Math.random() * 100}%`,
+                  top: `${Math.random() * 100}%`,
+                  animation: `float ${2 + Math.random()}s ease-in-out infinite`,
+                  animationDelay: `${Math.random()}s`
+                }}
+              />
+            ))}
+          </div>
+        )}
+        <div className="max-w-3xl mx-auto px-4 py-6 relative">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
-              <PlatformIcon className="w-12 h-12" />
+              <div className="w-12 h-12 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center shadow-lg">
+                <Sparkles className="w-6 h-6 text-white" />
+              </div>
               <div>
-                <h2 className="text-xl font-bold">{platform.name} Matches</h2>
-                <p className="text-white/90 text-sm">
-                  {totalFound} matches from {searchResults.length} follows
+                <h2 className="text-xl font-bold">{totalFound} Connections Found!</h2>
+                <p className="text-white/95 text-sm">
+                  From {searchResults.length} {platform.name} follows
                 </p>
               </div>
             </div>
             {totalSelected > 0 && (
               <div className="text-right">
                 <div className="text-2xl font-bold">{totalSelected}</div>
-                <div className="text-xs text-white/80">selected</div>
+                <div className="text-xs font-medium">selected</div>
               </div>
             )}
           </div>
···
       </div>
 
       {/* Action Buttons */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
+      <div className="bg-white/95 dark:bg-slate-800/95 border-b-2 border-slate-200 dark:border-slate-700 sticky top-0 z-10 backdrop-blur-sm">
         <div className="max-w-3xl mx-auto px-4 py-3 flex space-x-2">
           <button
             onClick={onSelectAll}
-            className="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            className="flex-1 bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-xl text-sm font-semibold transition-all shadow-md hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800"
             type="button"
           >
             Select All
           </button>
           <button
             onClick={onDeselectAll}
-            className="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-3 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+            className="flex-1 bg-slate-600 dark:bg-slate-700 hover:bg-slate-700 dark:hover:bg-slate-600 text-white py-3 rounded-xl text-sm font-semibold transition-all shadow-md hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-slate-400"
             type="button"
           >
             Clear
···
 
       {/* Fixed Bottom Action Bar */}
       {totalSelected > 0 && (
-        <div className="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pt-8 pb-6">
+        <div className="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-white via-white to-transparent dark:from-slate-900 dark:via-slate-900 dark:to-transparent pt-8 pb-6">
           <div className="max-w-3xl mx-auto px-4">
             <button
               onClick={onFollowSelected}
               disabled={isFollowing}
-              className="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 text-white py-5 rounded-2xl font-bold text-lg transition-all shadow-2xl hover:shadow-3xl flex items-center justify-center space-x-3 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800"
+              className="w-full bg-firefly-banner dark:bg-firefly-banner-dark text-white hover:from-amber-600 hover:via-orange-600 hover:to-pink-600 text-white py-5 rounded-2xl font-bold text-lg transition-all shadow-2xl hover:shadow-3xl flex items-center justify-center space-x-3 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800"
             >
-              <Heart className="w-6 h-6" />
-              <span>Follow {totalSelected} Selected {totalSelected === 1 ? 'User' : 'Users'}</span>
+              <Sparkles className="w-6 h-6" />
+              <span>Light Up {totalSelected} Connection{totalSelected === 1 ? '' : 's'} ✨</span>
             </button>
           </div>
         </div>

tailwind.config.js

···
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'media', // use system prefs
+  darkMode: 'class', // Changed from 'media' to 'class' for manual control
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        firefly: {
+          glow: '#FCD34D', // close to amber-300
+          amber: '#F59E0B', // close to amber-500
+          orange: '#F97316', // close to orange-500
+          pink: '#EC4899', // close to tailwind pink-500
+          cyan: '#10D2F4', // close to tailwind cyan-300
+        }
+      },
+      backgroundImage: {
+      'firefly-banner':
+        'linear-gradient(90deg, rgba(9,163,190,1) 0%, rgba(91,33,182,1) 33%, rgba(236,72,153,1) 67%, rgba(244,105,6,1) 100%)',
+      'firefly-banner-dark':
+        'linear-gradient(90deg, rgba(24,21,60,1) 0%, rgba(55,20,94,1) 33%, rgba(104,25,98,1) 67%, rgba(36,16,54,1) 100%)',
+      },
+      animation: {
+        'float': 'float 3s ease-in-out infinite',
+        'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translate(0, 0) scale(1)', opacity: '0.3' },
+          '25%': { transform: 'translate(10px, -20px) scale(1.2)', opacity: '0.8' },
+          '50%': { transform: 'translate(-5px, -40px) scale(1)', opacity: '0.5' },
+          '75%': { transform: 'translate(15px, -25px) scale(1.1)', opacity: '0.9' },
+        },
+        'glow-pulse': {
+          '0%, 100%': { boxShadow: '0 0 20px rgba(251, 191, 36, 0.3)' },
+          '50%': { boxShadow: '0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)' },
+        },
+      },
+    },
   },
   plugins: [],
 }