feat: P2 Mobile CSS 变量对齐

- 新建 mobile/src/styles/variables.css — Design Token 变量定义
- App.vue — 使用 var(--muted) / var(--foreground) 替代硬编码
- sandbox/index.vue — 完整迁移参考页（品牌色/边框/文字/背景）
- docs/design-tokens.md — 更新 Mobile 迁移对照表

mobile/src/App.vue

@@ -18,8 +18,12 @@ const showTabBar = computed(() => {
 </script>
 
 <style>
+@import './styles/variables.css';
+
 page {
-  background-color: #f5f5f5;
+  background-color: var(--muted);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--foreground);
+  font-size: 28rpx;
 }
 </style>

mobile/src/pages/sandbox/index.vue

@@ -83,28 +83,28 @@ function onModelChange(e: any) {
 <style scoped>
 .sandbox { display: flex; flex-direction: column; height: 100vh; }
 .model-selector {
-  display: flex; align-items: center; padding: 16rpx 30rpx; background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
+  border-bottom: 1rpx solid var(--border);
 }
-.label { font-size: 26rpx; color: #666; }
-.picker-value { font-size: 26rpx; color: #4f8cff; margin-left: 8rpx; }
+.label { font-size: 26rpx; color: var(--muted-foreground); }
+.picker-value { font-size: 26rpx; color: var(--brand); margin-left: 8rpx; }
 .chat-area { flex: 1; padding: 20rpx 30rpx; overflow-y: auto; }
 .message { margin-bottom: 20rpx; max-width: 80%; }
 .message.user { align-self: flex-end; margin-left: auto; }
 .message.ai { align-self: flex-start; }
-.role { font-size: 22rpx; color: #999; display: block; margin-bottom: 6rpx; }
+.role { font-size: 22rpx; color: var(--muted-foreground); display: block; margin-bottom: 6rpx; }
 .content {
   display: inline-block; padding: 16rpx 20rpx; border-radius: 12rpx; font-size: 28rpx; line-height: 1.6;
 }
-.message.user .content { background: #4f8cff; color: #fff; border-radius: 12rpx 0 12rpx 12rpx; }
-.message.ai .content { background: #fff; color: #333; border-radius: 0 12rpx 12rpx 12rpx; }
+.message.user .content { background: var(--brand); color: #fff; border-radius: 12rpx 0 12rpx 12rpx; }
+.message.ai .content { background: var(--card); color: var(--foreground); border-radius: 0 12rpx 12rpx 12rpx; }
 .input-area {
-  display: flex; align-items: center; padding: 16rpx 30rpx; background: #fff;
-  border-top: 1rpx solid #f0f0f0;
+  display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
+  border-top: 1rpx solid var(--border);
 }
-.input { flex: 1; background: #f5f5f5; border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
+.input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
 .btn-send {
-  background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx;
+  background: var(--brand); color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx;
   font-size: 26rpx; margin-left: 16rpx; border: none;
 }
 </style>

mobile/src/styles/variables.css

@@ -0,0 +1,15 @@
+/* 宇之然 Design Token — Mobile 版 */
+/* 与 Web 端 CSS 变量保持一致 */
+
+page {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --muted: #f5f5f5;
+  --muted-foreground: #666666;
+  --border: #e5e5e5;
+  --brand: #0070c4;
+  --brand-light: #e0effe;
+  --radius: 12rpx;
+}