style(colors): replace hard-coded whites with semantic tokens

app/(auth)/layout.tsx

@@ -5,11 +5,11 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
     <div className="flex min-h-screen">
       <div className="hidden md:flex w-1/2 relative overflow-hidden bg-primary items-center justify-center p-12 text-primary-foreground">
         <div className="absolute inset-0 bg-linear-to-br from-primary via-primary/90 to-primary/80" />
-        <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-white/10 blur-[120px]" />
-        <div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-white/10 blur-[120px]" />
+        <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
         <div className="relative z-10 max-w-md space-y-6">
           <div className="flex items-center gap-3">
-            <div className="rounded-2xl bg-white/20 p-3 backdrop-blur-sm">
+            <div className="rounded-2xl bg-primary-foreground/20 p-3 backdrop-blur-sm">
               <Gamepad2 className="h-10 w-10" />
             </div>
             <span className="text-3xl font-bold tracking-tighter">聚玩 JuWan</span>

app/(main)/search/page.tsx

@@ -90,7 +90,7 @@ function PlayerCard({ player }: { player: Player }) {
       <Card className="h-full hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
         <CardHeader className="p-4 pb-2 flex flex-row items-start justify-between space-y-0">
           <div className="flex items-center gap-3">
-            <Avatar className="h-12 w-12 border-2 border-white shadow-sm">
+            <Avatar className="h-12 w-12 border-2 border-background shadow-sm">
               <AvatarImage src={player.user.avatar} alt={player.user.nickname} />
               <AvatarFallback>{player.user.nickname.slice(0, 2)}</AvatarFallback>
             </Avatar>
@@ -179,7 +179,7 @@ function ShopCard({ item }: { item: ShopResultItem }) {
       <Card className="h-full hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
         <CardHeader className="p-4 pb-2 flex flex-row items-start justify-between space-y-0">
           <div className="flex items-center gap-3">
-            <Avatar className="h-12 w-12 border-2 border-white shadow-sm">
+            <Avatar className="h-12 w-12 border-2 border-background shadow-sm">
               <AvatarImage src={item.shop.owner.avatar} alt={item.shop.name} />
               <AvatarFallback>{item.shop.name.slice(0, 2)}</AvatarFallback>
             </Avatar>

app/(main)/shop/[id]/page.tsx

@@ -46,7 +46,7 @@ export default async function ShopPage({ params }: PageProps) {
                   <div className="w-full h-full bg-gradient-to-r from-primary/20 to-primary/10" />
                 )}
                 <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
-                  <h1 className="text-3xl md:text-5xl font-bold text-white text-center px-4">
+                  <h1 className="text-3xl md:text-5xl font-bold text-primary-foreground text-center px-4">
                     {shop.name}
                   </h1>
                 </div>