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/TopNav.tsx

@@ -51,7 +51,7 @@ export default function TopNav({
         <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowQr(true)}
-            className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
+            className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
           >
             <QrCode size={13} />
             邀请
@@ -59,7 +59,7 @@ export default function TopNav({
           {isCreator && (
             <button
               onClick={() => setShowManage(true)}
-              className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100"
+              className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
             >
               <Crown size={13} />
               管理
@@ -67,27 +67,27 @@ export default function TopNav({
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
+        <h1 className="text-center text-base font-bold tracking-tight text-white">
           <span className="block leading-tight">NoWhatever</span>
-          <span className="block text-[10px] font-medium tracking-widest text-zinc-400">
+          <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
           </span>
         </h1>
 
-        <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
+        <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
           {locked && (
             <Lock size={12} className="text-amber-500" />
           )}
-          <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
+          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
             {roomId}
           </span>
           <div className="flex items-center gap-0.5">
             <Users size={13} />
-            <span className="font-semibold text-emerald-500">{userCount}</span>
+            <span className="font-semibold text-accent">{userCount}</span>
           </div>
           <button
             onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
             aria-label="退出房间"
           >
             <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-16 z-50 -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-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}