ui: 全站统一暗色主题设计系统

- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题

src/components/MatchResult.tsx

@@ -58,7 +58,7 @@ function NoMatchResult({
 
   return (
     <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-zinc-600 to-zinc-800 px-6 py-10"
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
@@ -68,7 +68,7 @@ function NoMatchResult({
         animate={{ scale: 1, rotate: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
       >
-        <SearchX size={56} className="text-zinc-400" />
+        <SearchX size={56} className="text-muted" />
       </motion.div>
 
       <motion.h1
@@ -81,7 +81,7 @@ function NoMatchResult({
       </motion.h1>
 
       <motion.p
-        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-zinc-400"
+        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.45 }}
@@ -98,7 +98,7 @@ function NoMatchResult({
         <motion.button
           onClick={onReset}
           disabled={resetting}
-          className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-zinc-800 shadow-lg transition-colors hover:bg-zinc-100 disabled:opacity-50"
+          className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
           whileTap={{ scale: 0.95 }}
         >
           <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
@@ -107,7 +107,7 @@ function NoMatchResult({
 
         <motion.button
           onClick={() => router.push("/")}
-          className="flex items-center justify-center gap-2 rounded-full bg-white/15 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/25"
+          className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
           whileTap={{ scale: 0.95 }}
         >
           <Home size={15} />
@@ -132,7 +132,7 @@ function RunnerUpCard({
       href={buildNavUrl(restaurant)}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
+      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
     >
       {restaurant.images?.[0] && (
         <img
@@ -146,7 +146,7 @@ function RunnerUpCard({
         <p className="truncate text-sm font-bold text-white">
           {restaurant.name}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-white/70">
+        <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
           <span className="flex items-center gap-0.5">
             <Star size={11} className="fill-yellow-300 text-yellow-300" />
             {restaurant.rating}
@@ -159,7 +159,7 @@ function RunnerUpCard({
             </span>
           )}
         </div>
-        <p className="mt-0.5 text-[11px] font-medium text-amber-200">
+        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
           {likes}/{userCount} 人想去
         </p>
       </div>
@@ -282,25 +282,28 @@ export default function MatchResult({
 
   return (
     <motion.div
-      className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
-        isUnanimous
-          ? "bg-linear-to-b from-emerald-500 to-teal-600"
-          : "bg-linear-to-b from-amber-500 to-orange-500"
-      }`}
+      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
     >
-      <div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center">
+      {/* Accent glow behind icon */}
+      <div
+        className={`pointer-events-none fixed left-1/2 top-0 h-72 w-72 -translate-x-1/2 -translate-y-1/3 rounded-full blur-3xl ${
+          isUnanimous ? "bg-emerald-500/20" : "bg-amber-500/20"
+        }`}
+      />
+
+      <div className="relative flex w-full max-w-sm flex-1 flex-col items-center justify-center">
         <motion.div
           initial={{ scale: 0, rotate: -20 }}
           animate={{ scale: 1, rotate: 0 }}
           transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
         >
           {isUnanimous ? (
-            <PartyPopper size={56} className="text-yellow-300" />
+            <PartyPopper size={56} className="text-emerald-400" />
           ) : (
-            <Trophy size={56} className="text-yellow-200" />
+            <Trophy size={56} className="text-amber-400" />
           )}
         </motion.div>
 
@@ -314,7 +317,7 @@ export default function MatchResult({
         </motion.h1>
 
         <motion.p
-          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
+          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
           initial={{ y: 20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.45 }}
@@ -326,7 +329,7 @@ export default function MatchResult({
 
         {isUnanimous && (
           <motion.div
-            className="mt-3 flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 backdrop-blur-sm"
+            className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
             initial={{ scale: 0, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{
@@ -336,16 +339,17 @@ export default function MatchResult({
               delay: 0.55,
             }}
           >
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
-            <span className="text-xs font-bold text-white">
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
+            <span className="text-xs font-bold text-emerald-300">
               默契度 100% · {userCount} 人全员一致
             </span>
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
           </motion.div>
         )}
 
+        {/* Result card */}
         <motion.div
-          className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl"
+          className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
           initial={{ y: 60, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
@@ -360,22 +364,22 @@ export default function MatchResult({
           )}
           <div className="p-4">
             <div className="flex items-start justify-between gap-2">
-              <h2 className="text-lg font-bold leading-tight text-zinc-900">
+              <h2 className="text-lg font-bold leading-tight text-white">
                 {restaurant.name}
               </h2>
               {restaurant.category && (
-                <span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
+                <span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
                   {restaurant.category}
                 </span>
               )}
             </div>
 
-            <div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
+            <div className="mt-2 flex items-center gap-3 text-sm text-muted">
               <span className="flex items-center gap-1">
                 <Star size={13} className="fill-amber-400 text-amber-400" />
                 {restaurant.rating}
               </span>
-              <span className="font-semibold text-emerald-600">
+              <span className="font-semibold text-emerald-400">
                 {restaurant.price}
               </span>
               {restaurant.distance && (
@@ -387,13 +391,13 @@ export default function MatchResult({
             </div>
 
             {restaurant.address && (
-              <p className="mt-2 text-xs leading-relaxed text-zinc-400">
+              <p className="mt-2 text-xs leading-relaxed text-muted">
                 {restaurant.address}
               </p>
             )}
 
             {restaurant.openTime && (
-              <div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
+              <div className="mt-1.5 flex items-center gap-1 text-xs text-muted">
                 <Clock size={12} />
                 <span>{restaurant.openTime}</span>
               </div>
@@ -407,7 +411,7 @@ export default function MatchResult({
                   .map((t) => (
                     <span
                       key={t}
-                      className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
+                      className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
                     >
                       {t.trim()}
                     </span>
@@ -417,6 +421,7 @@ export default function MatchResult({
           </div>
         </motion.div>
 
+        {/* Action buttons */}
         <motion.div
           className="mt-5 flex w-full flex-col gap-2.5"
           initial={{ y: 30, opacity: 0 }}
@@ -427,9 +432,7 @@ export default function MatchResult({
             href={buildNavUrl(restaurant)}
             target="_blank"
             rel="noopener noreferrer"
-            className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${
-              isUnanimous ? "text-emerald-600" : "text-orange-600"
-            }`}
+            className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
             whileTap={{ scale: 0.95 }}
           >
             <Navigation size={16} />
@@ -439,7 +442,7 @@ export default function MatchResult({
           {restaurant.tel && (
             <motion.a
               href={`tel:${restaurant.tel}`}
-              className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
               whileTap={{ scale: 0.95 }}
             >
               <Phone size={15} />
@@ -449,7 +452,7 @@ export default function MatchResult({
 
           <motion.button
             onClick={handleShare}
-            className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
@@ -457,6 +460,7 @@ export default function MatchResult({
           </motion.button>
         </motion.div>
 
+        {/* Runner ups */}
         {!isUnanimous && runnerUpRestaurants.length > 0 && (
           <motion.div
             className="mt-5 w-full"
@@ -466,7 +470,7 @@ export default function MatchResult({
           >
             <button
               onClick={() => setShowRunnerUps((v) => !v)}
-              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white"
+              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-muted transition-colors hover:text-foreground"
             >
               其他候选（{runnerUpRestaurants.length}）
               <motion.span
@@ -500,6 +504,7 @@ export default function MatchResult({
           </motion.div>
         )}
 
+        {/* Bottom actions */}
         <motion.div
           className="mt-5 flex w-full flex-col items-center gap-2.5"
           initial={{ opacity: 0 }}
@@ -511,7 +516,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => onNarrow(narrowIds)}
                 disabled={resetting}
-                className="flex w-full items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
+                className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <Swords size={15} />
@@ -519,7 +524,9 @@ export default function MatchResult({
               </motion.button>
               <motion.button
                 onClick={() => router.push("/")}
-                className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
+                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
+                }`}
               >
                 <RefreshCw size={13} />
                 换一批店
@@ -530,7 +537,7 @@ export default function MatchResult({
               <motion.button
                 onClick={onReset}
                 disabled={resetting}
-                className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
+                className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
@@ -539,7 +546,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => router.push("/")}
                 className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-200" : "text-amber-200"
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
                 }`}
               >
                 <RefreshCw size={13} />
@@ -553,7 +560,7 @@ export default function MatchResult({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}