diff --git a/src/app/globals.css b/src/app/globals.css
index e19404d6..78905df8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,121 +1,19 @@
 @import "tailwindcss";
-@import "../design/colors.css";
-@import "../design/spacing.css";
-@import "../design/typography.css";
-@import "../design/radius.css";
-@import "../design/border-widths.css";
-@import "../design/icon-sizes.css";
-@import "../design/breakpoints.css";
-@import "../design/dimensions.css";
 
 /* ============================================================
- * Tailwind 4 @theme - 将 CSS 变量注册为 utility 类
- * 在这里统一暴露，业务层可直接使用：
- *   - bg-accent / text-primary / border-error
- *   - p-md / m-lg / gap-sm
- *   - rounded-md
- *   - text-lg font-medium
- *   - border-thin / border-light
- *   - w-icon-sm / h-icon-md
+ * 设计系统 - 集中导入所有 token
+ * 每个 token 文件用 `@theme` 直接声明，Tailwind 4 自动收集
+ * 并生成 utility 类（如 `bg-accent` / `p-md` / `rounded-lg`）
  * ============================================================ */
 
-@theme inline {
-  /* ==================== 颜色 ==================== */
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-hint: var(--color-text-hint);
-  --color-text-banner: var(--color-text-banner);
-  --color-text-light: var(--color-text-light);
-  --color-text-foreground: var(--color-text-foreground);
-  --color-accent: var(--color-accent);
-  --color-primary: var(--color-primary);
-  --color-success: var(--color-success);
-  --color-error: var(--color-error);
-  --color-warning: var(--color-warning);
-  --color-gold: var(--color-gold);
-  --color-section-title: var(--color-section-title);
-  --color-settings-card-background: var(--color-settings-card-background);
-  --color-settings-divider: var(--color-settings-divider);
-  --color-settings-text-primary: var(--color-settings-text-primary);
-  --color-destructive: var(--color-destructive);
-  --color-chevron-icon: var(--color-chevron-icon);
-  --color-version-text: var(--color-version-text);
-  --color-profile-tag-background: var(--color-profile-tag-background);
-  --color-gifts-background: var(--color-gifts-background);
-  --color-gift-card-background: var(--color-gift-card-background);
-  --color-coin-icon: var(--color-coin-icon);
-  --color-button-gradient-start: var(--color-button-gradient-start);
-  --color-button-gradient-end: var(--color-button-gradient-end);
-  --color-nav-active-border: var(--color-nav-active-border);
-  --color-gift-price-text: var(--color-gift-price-text);
-  --color-activities-background: var(--color-activities-background);
-  --color-nav-active-gradient-start: var(--color-nav-active-gradient-start);
-  --color-nav-active-gradient-end: var(--color-nav-active-gradient-end);
-  --color-nav-active-icon: var(--color-nav-active-icon);
-  --color-nav-active-label: var(--color-nav-active-label);
-  --color-facebook-button-gradient-start: var(
-    --color-facebook-button-gradient-start
-  );
-  --color-facebook-button-gradient-end: var(
-    --color-facebook-button-gradient-end
-  );
-  --color-page-background: var(--color-page-background);
-
-  /* 扩展色 */
-  --color-sidebar-background: var(--color-sidebar-background);
-  --color-dark-background: var(--color-dark-background);
-  --color-dark-gray: var(--color-dark-gray);
-  --color-bubble-background: var(--color-bubble-background);
-  --color-chat-input-border: var(--color-chat-input-border);
-  --color-input-placeholder: var(--color-input-placeholder);
-  --color-pwa-button-text: var(--color-pwa-button-text);
-  --color-facebook-blue: var(--color-facebook-blue);
-  --color-dialog-background: var(--color-dialog-background);
-  --color-dialog-border: var(--color-dialog-border);
-  --color-blur-background: var(--color-blur-background);
-
-  /* ==================== 间距 ==================== */
-  --spacing-xs: var(--spacing-xs);
-  --spacing-sm: var(--spacing-sm);
-  --spacing-md: var(--spacing-md);
-  --spacing-lg: var(--spacing-lg);
-  --spacing-xl: var(--spacing-xl);
-  --spacing-xxl: var(--spacing-xxl);
-  --spacing-xxxl: var(--spacing-xxxl);
-
-  /* ==================== 圆角 ==================== */
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-xxl: var(--radius-xxl);
-  --radius-xxxl: var(--radius-xxxl);
-
-  /* ==================== 字体 ==================== */
-  --font-sans: var(--font-system);
-  --font-athelas: var(--color-athelas, var(--font-athelas));
-
-  /* ==================== 边框宽度 ==================== */
-  --border-thin: var(--border-thin);
-  --border-light: var(--border-light);
-  --border-normal: var(--border-normal);
-  --border-medium: var(--border-medium);
-  --border-bold: var(--border-bold);
-  --border-heavy: var(--border-heavy);
-
-  /* ==================== 图标尺寸 ==================== */
-  --icon-size-sm: var(--icon-size-sm);
-  --icon-size-md: var(--icon-size-md);
-  --icon-size-lg: var(--icon-size-lg);
-  --icon-size-xl: var(--icon-size-xl);
-  --icon-size-xxl: var(--icon-size-xxl);
-  --icon-size-xxxl: var(--icon-size-xxxl);
-  --icon-size-34: var(--icon-size-34);
-  --icon-size-40: var(--icon-size-40);
-  --icon-size-43: var(--icon-size-43);
-  --icon-size-56: var(--icon-size-56);
-  --icon-size-86: var(--icon-size-86);
-}
+@import "../tokens/colors.css";
+@import "../tokens/spacing.css";
+@import "../tokens/typography.css";
+@import "../tokens/radius.css";
+@import "../tokens/border-widths.css";
+@import "../tokens/icon-sizes.css";
+@import "../tokens/breakpoints.css";
+@import "../tokens/dimensions.css";
 
 /* ============================================================
  * 基础样式
diff --git a/src/design/border-widths.css b/src/design/border-widths.css
deleted file mode 100644
index b5466478..00000000
--- a/src/design/border-widths.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* ============================================================
- * 设计系统 - 边框宽度变量
- * 原始 Dart: lib/design/border_widths.dart
- * 集中管理应用边框宽度数值
- * ============================================================ */
-
-:root {
-  --border-thin: 0.5px;
-  --border-light: 1px;
-  --border-normal: 1.5px;
-  --border-medium: 2px;
-  --border-bold: 3px;
-  --border-heavy: 4px;
-}
diff --git a/src/design/colors.css b/src/design/colors.css
deleted file mode 100644
index 34a71adc..00000000
--- a/src/design/colors.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/* ============================================================
- * 设计系统 - 颜色变量
- * 原始 Dart: lib/design/colors.dart (light 主题)
- * 集中管理颜色值，CSS 变量 + Tailwind utility 通过 globals.css 暴露
- * ============================================================ */
-
-:root {
-  /* ==================== 文字颜色 ==================== */
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #9e9e9e;
-  --color-text-hint: #757575;
-  --color-text-banner: #8c8b8b;
-  --color-text-light: #e0e0e0;
-  --color-text-foreground: #171717;
-
-  /* ==================== 品牌色 ==================== */
-  --color-accent: #f84d96;
-  --color-primary: #1677ff;
-  --color-success: #52c41a;
-  --color-error: #ff4d4f;
-  --color-warning: #ffa940;
-
-  /* ==================== Profile 页面 ==================== */
-  --color-gold: #ffd700;
-  --color-section-title: #a59db1;
-  --color-settings-card-background: #261c31;
-  --color-settings-divider: #3d314a;
-  --color-settings-text-primary: #e0dce6;
-  --color-destructive: #ff6b6b;
-  --color-chevron-icon: #f67e9f;
-  --color-version-text: #6c6378;
-  --color-profile-tag-background: #2a2833;
-
-  /* ==================== Gifts 页面 ==================== */
-  --color-gifts-background: #0d0b14;
-  --color-gift-card-background: #2d253a;
-  --color-coin-icon: #ffa940;
-  --color-button-gradient-start: #8b5cf6;
-  --color-button-gradient-end: #ec4899;
-  --color-nav-active-border: #8b5cf6;
-  --color-gift-price-text: #ffa940;
-
-  /* ==================== Activities 页面 ==================== */
-  --color-activities-background: #0e0b16;
-
-  /* ==================== 导航激活状态 ==================== */
-  --color-nav-active-gradient-start: #667eea;
-  --color-nav-active-gradient-end: #764ba2;
-  --color-nav-active-icon: #667eea;
-  --color-nav-active-label: #667eea;
-
-  /* ==================== Splash 页面 Facebook 按钮 ==================== */
-  --color-facebook-button-gradient-start: #ff67e0;
-  --color-facebook-button-gradient-end: #ff52a2;
-
-  /* ==================== 页面背景（body 用） ==================== */
-  --color-page-background: #ffffff;
-
-  /* ==================== 扩展令牌 (迁移自 Flutter UI) ==================== */
-  /* 侧边栏/Profile 深色背景 */
-  --color-sidebar-background: #0d0b14;
-  --color-dark-background: #0d0b14;
-  --color-dark-gray: #2a2a2a;
-  --color-bubble-background: #1a1625;
-  --color-bubble-transparent: rgba(255, 255, 255, 0);
-
-  /* 聊天输入框 */
-  --color-chat-input-border: rgba(255, 255, 255, 0.1);
-  --color-input-box-shadow: rgba(0, 0, 0, 0.1);
-  --color-input-placeholder: #757575;
-  --color-pwa-button-text: #ffffff;
-
-  /* Facebook 蓝 */
-  --color-facebook-blue: #1877f2;
-
-  /* Dialog 通用 */
-  --color-dialog-background: #1f1a2e;
-  --color-dialog-border: rgba(255, 255, 255, 0.1);
-
-  /* 半透明 / 模糊 */
-  --color-blur-background: rgba(13, 11, 20, 0.85);
-}
diff --git a/src/design/radius.css b/src/design/radius.css
deleted file mode 100644
index 3471b993..00000000
--- a/src/design/radius.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/* ============================================================
- * 设计系统 - 圆角变量
- * 原始 Dart: lib/design/radius.dart
- * 集中管理应用圆角数值
- * ============================================================ */
-
-:root {
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-xxl: 20px;
-  --radius-xxxl: 24px;
-  --radius-full: 999px;
-}
diff --git a/src/tokens/border-widths.css b/src/tokens/border-widths.css
new file mode 100644
index 00000000..65b1823f
--- /dev/null
+++ b/src/tokens/border-widths.css
@@ -0,0 +1,12 @@
+/**
+ * 边框宽度 token
+ * 原始 Dart: lib/design/border_widths.dart
+ */
+@theme {
+  --border-thin: 0.5px;
+  --border-light: 1px;
+  --border-normal: 1.5px;
+  --border-medium: 2px;
+  --border-bold: 3px;
+  --border-heavy: 4px;
+}
diff --git a/src/design/breakpoints.css b/src/tokens/breakpoints.css
similarity index 54%
rename from src/design/breakpoints.css
rename to src/tokens/breakpoints.css
index 2f87ad05..acdd7808 100644
--- a/src/design/breakpoints.css
+++ b/src/tokens/breakpoints.css
@@ -1,8 +1,7 @@
-/* ============================================================
- * 设计系统 - 响应式断点
+/**
+ * 响应式断点 token
  * 原始 Dart: lib/ui/core/responsive.dart
- * ============================================================ */
-
+ */
 :root {
   --bp-mobile-max: 599.98px;
   --bp-tablet-min: 600px;
diff --git a/src/tokens/colors.css b/src/tokens/colors.css
new file mode 100644
index 00000000..5d2896c9
--- /dev/null
+++ b/src/tokens/colors.css
@@ -0,0 +1,57 @@
+/**
+ * 颜色 token
+ * 原始 Dart: lib/design/colors.dart (light 主题)
+ *
+ * 使用 `@theme` 直接声明，Tailwind 4 自动生成 utility 类：
+ *   - bg-accent / text-primary / border-error
+ *
+ * 对应组件用法（CSS Module / Tailwind class）：
+ *   - `var(--color-accent)` 或 `className="bg-accent"`
+ */
+@theme {
+  /* ==================== 文字颜色 ==================== */
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #9e9e9e;
+  --color-text-hint: #757575;
+  --color-text-banner: #8c8b8b;
+  --color-text-light: #e0e0e0;
+  --color-text-foreground: #171717;
+
+  /* ==================== 品牌色 ==================== */
+  --color-accent: #f84d96;
+  --color-primary: #1677ff;
+  --color-success: #52c41a;
+  --color-error: #ff4d4f;
+  --color-warning: #ffa940;
+
+  /* ==================== Splash 页面 Facebook 按钮 ==================== */
+  --color-button-gradient-start: #ff67e0;
+  --color-button-gradient-end: #ff52a2;
+
+  /* ==================== 页面背景（body 用） ==================== */
+  --color-page-background: #ffffff;
+
+  /* ==================== 扩展令牌（迁移自 Flutter UI） ==================== */
+  /* 侧边栏/Profile 深色背景 */
+  --color-sidebar-background: #0d0b14;
+  --color-dark-background: #0d0b14;
+  --color-dark-gray: #2a2a2a;
+  --color-bubble-background: #1a1625;
+  --color-bubble-transparent: rgba(255, 255, 255, 0);
+
+  /* 聊天输入框 */
+  --color-chat-input-border: rgba(255, 255, 255, 0.1);
+  --color-input-box-shadow: rgba(0, 0, 0, 0.1);
+  --color-input-placeholder: #757575;
+  --color-pwa-button-text: #ffffff;
+
+  /* Facebook 蓝 */
+  --color-facebook-blue: #1877f2;
+
+  /* Dialog 通用 */
+  --color-dialog-background: #1f1a2e;
+  --color-dialog-border: rgba(255, 255, 255, 0.1);
+
+  /* 半透明 / 模糊 */
+  --color-blur-background: rgba(13, 11, 20, 0.85);
+}
diff --git a/src/design/dimensions.css b/src/tokens/dimensions.css
similarity index 74%
rename from src/design/dimensions.css
rename to src/tokens/dimensions.css
index 90590fce..c32e00a3 100644
--- a/src/design/dimensions.css
+++ b/src/tokens/dimensions.css
@@ -1,9 +1,9 @@
-/* ============================================================
- * 设计系统 - 固定尺寸变量
+/**
+ * 固定尺寸 token
  * 原始 Dart: lib/design/app_dimensions.dart
- * 集中管理按钮/对话框/气泡等固定尺寸
- * ============================================================ */
-
+ *
+ * 注：这些是不应通过 Tailwind 缩放变化的硬尺寸（如按钮高度、对话框宽度）
+ */
 :root {
   /* 按钮 */
   --button-height: 48px;
diff --git a/src/design/icon-sizes.css b/src/tokens/icon-sizes.css
similarity index 58%
rename from src/design/icon-sizes.css
rename to src/tokens/icon-sizes.css
index 7d02eaa4..d101af9c 100644
--- a/src/design/icon-sizes.css
+++ b/src/tokens/icon-sizes.css
@@ -1,10 +1,8 @@
-/* ============================================================
- * 设计系统 - 图标尺寸变量
+/**
+ * 图标尺寸 token
  * 原始 Dart: lib/design/icon_sizes.dart
- * 集中管理应用图标尺寸数值
- * ============================================================ */
-
-:root {
+ */
+@theme {
   --icon-size-sm: 16px;
   --icon-size-md: 18px;
   --icon-size-lg: 20px;
diff --git a/src/tokens/radius.css b/src/tokens/radius.css
new file mode 100644
index 00000000..f96096c8
--- /dev/null
+++ b/src/tokens/radius.css
@@ -0,0 +1,13 @@
+/**
+ * 圆角 token
+ * 原始 Dart: lib/design/radius.dart
+ */
+@theme {
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-xxl: 20px;
+  --radius-xxxl: 24px;
+  --radius-full: 999px;
+}
diff --git a/src/design/spacing.css b/src/tokens/spacing.css
similarity index 62%
rename from src/design/spacing.css
rename to src/tokens/spacing.css
index 1d216f41..266cfd4f 100644
--- a/src/design/spacing.css
+++ b/src/tokens/spacing.css
@@ -1,10 +1,8 @@
-/* ============================================================
- * 设计系统 - 间距变量
+/**
+ * 间距 token
  * 原始 Dart: lib/design/spacing.dart
- * 集中管理应用间距数值
- * ============================================================ */
-
-:root {
+ */
+@theme {
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
diff --git a/src/design/typography.css b/src/tokens/typography.css
similarity index 75%
rename from src/design/typography.css
rename to src/tokens/typography.css
index ca57768f..c4efb0d9 100644
--- a/src/design/typography.css
+++ b/src/tokens/typography.css
@@ -1,17 +1,19 @@
-/* ============================================================
- * 设计系统 - 字体
+/**
+ * 字体 token
  * 原始 Dart: lib/design/fonts.dart + font_sizes.dart
  *
  * body 使用跨平台系统字体栈
- * Athelas 为 Apple 平台专用字体
- * ============================================================ */
-
-:root {
+ * Athelas 为 Apple 平台专用字体（通过 `next/font/local` 加载）
+ */
+@theme {
   /* 字体族 */
   --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-athelas: "Athelas", serif;
 
+  /* Tailwind 默认字体别名：font-sans → font-system */
+  --font-sans: var(--font-system);
+
   /* 字体尺寸 */
   --font-size-xs: 10px;
   --font-size-sm: 12px;