Enhance UI components with improved backdrop filters and shadow effects; update ThemeSwitcher, Badge, and Button styles for better visual consistency

components/ThemeSwitcher.tsx

@@ -6,7 +6,7 @@ export function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
 
   return (
-    <div className="inline-flex bg-[var(--glass-bg)] backdrop-blur-xl border border-[var(--glass-border)] rounded-[var(--radius-full)] p-1 shadow-[var(--shadow-sm)]">
+    <div className="inline-flex bg-[var(--glass-bg)] backdrop-blur-xl [-webkit-backdrop-filter:blur(25px)] border border-[var(--glass-border)] rounded-[var(--radius-full)] p-1 shadow-[var(--shadow-sm)]">
       <button
         onClick={() => setTheme('light')}
         className={`

components/ui/Badge.tsx

@@ -8,8 +8,8 @@ interface BadgeProps {
 
 export function Badge({ children, variant = 'primary', className = '' }: BadgeProps) {
   const variants = {
-    primary: "bg-[var(--accent-color)] text-white",
-    secondary: "bg-[var(--glass-bg)] backdrop-blur-[10px] border border-[var(--glass-border)] text-[var(--text-color)]",
+    primary: "bg-[var(--accent-color)] text-white shadow-[var(--shadow-sm)]",
+    secondary: "bg-[var(--glass-bg)] backdrop-blur-[10px] [-webkit-backdrop-filter:blur(10px)] border border-[var(--glass-border)] text-[var(--text-color)]",
   };
 
   return (
@@ -19,6 +19,7 @@ export function Badge({ children, variant = 'primary', className = '' }: BadgePr
         px-3 py-1
         rounded-[var(--radius-full)]
         text-xs font-semibold
+        transition-all duration-200
         ${variants[variant]}
         ${className}
       `}

components/ui/Button.tsx

@@ -27,7 +27,9 @@ export function Button({
     `,
     secondary: `
       bg-[var(--glass-bg)] 
-      backdrop-blur-xl 
+      backdrop-blur-xl
+      [-webkit-backdrop-filter:blur(25px)_saturate(180%)]
+      saturate-[180%]
       border 
       border-[var(--glass-border)] 
       rounded-[var(--radius-2xl)]