refactor(design-tokens): move @theme declarations to individual token files

Consolidate the design system registration by removing the centralized
`@theme inline` block and all design token imports from globals.css.
Each token file now declares its own `@theme` rules directly, allowing
Tailwind 4 to auto-collect them and generate utility classes (e.g.
`bg-accent`, `p-md`, `rounded-lg`) without redundant re-mapping.

This simplifies globals.css, removes a layer of indirection, and keeps
the design token definitions co-located with their `@theme` exposure.

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;
+}

src/tokens/breakpoints.css

@@ -0,0 +1,11 @@
+/**
+ * 响应式断点 token
+ * 原始 Dart: lib/ui/core/responsive.dart
+ */
+:root {
+  --bp-mobile-max: 599.98px;
+  --bp-tablet-min: 600px;
+  --bp-tablet-max: 1023.98px;
+  --bp-desktop-min: 1024px;
+  --shell-max-width: 500px;
+}

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);
+}

src/tokens/dimensions.css

@@ -0,0 +1,35 @@
+/**
+ * 固定尺寸 token
+ * 原始 Dart: lib/design/app_dimensions.dart
+ *
+ * 注：这些是不应通过 Tailwind 缩放变化的硬尺寸（如按钮高度、对话框宽度）
+ */
+:root {
+  /* 按钮 */
+  --button-height: 48px;
+  --button-height-lg: 56px;
+
+  /* Splash Facebook 登录按钮 */
+  --splash-facebook-button-height: 56px;
+  --splash-facebook-button-radius: 28px;
+
+  /* PWA 按钮 */
+  --pwa-button-height: 44px;
+
+  /* 对话框 */
+  --dialog-max-width: 360px;
+  --pwa-install-dialog-max-width: 360px;
+  --pwa-install-container-size: 64px;
+
+  /* 列表项 */
+  --item-height: 56px;
+
+  /* 消息气泡 */
+  --bubble-min-width: 60px;
+  --bubble-max-width: 280px;
+  --bubble-min-height: 36px;
+
+  /* 聊天媒体 */
+  --chat-media-max-width: 240px;
+  --chat-media-max-height: 240px;
+}

src/tokens/icon-sizes.css

@@ -0,0 +1,17 @@
+/**
+ * 图标尺寸 token
+ * 原始 Dart: lib/design/icon_sizes.dart
+ */
+@theme {
+  --icon-size-sm: 16px;
+  --icon-size-md: 18px;
+  --icon-size-lg: 20px;
+  --icon-size-xl: 24px;
+  --icon-size-xxl: 28px;
+  --icon-size-xxxl: 32px;
+  --icon-size-34: 34px;
+  --icon-size-40: 40px;
+  --icon-size-43: 43px;
+  --icon-size-56: 56px;
+  --icon-size-86: 86px;
+}

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;
+}

src/tokens/spacing.css

@@ -0,0 +1,19 @@
+/**
+ * 间距 token
+ * 原始 Dart: lib/design/spacing.dart
+ */
+@theme {
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+  --spacing-xxxl: 32px;
+
+  /* 扩展间距（迁移自 Flutter widgets） */
+  --spacing-26: 26px;
+  --spacing-30: 30px;
+  --spacing-40: 40px;
+  --spacing-46: 46px;
+}

src/tokens/typography.css

@@ -0,0 +1,31 @@
+/**
+ * 字体 token
+ * 原始 Dart: lib/design/fonts.dart + font_sizes.dart
+ *
+ * body 使用跨平台系统字体栈
+ * 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;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-xxl: 20px;
+  --font-size-title: 24px;
+  --font-size-title-large: 28px;
+  --font-size-title-x-large: 32px;
+
+  /* 扩展字号（迁移自 Flutter widgets） */
+  --font-size-22: 22px;
+  --font-size-26: 26px;
+}