feat(styles): migrate design system tokens to CSS variables

Replace minimal background/foreground vars with a comprehensive design
system covering colors (background, text, brand, profile, gifts,
activities, nav), spacing, and border-radius tokens. Mirrors the
original Dart design constants under src/design/*.ts and supports
dark mode.

barrelsby.json

@@ -10,6 +10,7 @@
     "./src/data/storage/auth",
     "./src/data/storage/user",
     "./src/data/storage/chat",
-    "./src/data/storage/app"
+    "./src/data/storage/app", 
+    "./src/design"
   ]
 }

src/app/globals.css

@@ -1,26 +1,113 @@
 @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";
 
-:root {
+/* ============================================================
-  --background: #ffffff;
+ * Tailwind 4 @theme - 将 CSS 变量注册为 utility 类
-  --foreground: #171717;
+ * 在这里统一暴露，业务层可直接使用：
-}
+ *   - 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
+ * ============================================================ */
 
 @theme inline {
-  --color-background: var(--background);
+  /* ==================== 颜色 ==================== */
-  --color-foreground: var(--foreground);
+  --color-text-primary: var(--color-text-primary);
-  --font-sans: var(--font-geist-sans);
+  --color-text-secondary: var(--color-text-secondary);
-  --font-mono: var(--font-geist-mono);
+  --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);
+
+  /* ==================== 间距 ==================== */
+  --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(--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);
 }
 
-@media (prefers-color-scheme: dark) {
+/* ============================================================
-  :root {
+ * 基础样式
-    --background: #0a0a0a;
+ * ============================================================ */
-    --foreground: #ededed;
-  }
-}
 
 body {
-  background: var(--background);
+  background: var(--color-page-background);
-  color: var(--foreground);
+  color: var(--color-text-foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-system);
 }

src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "cozsweet",
-  description: "Generated by create next app",
+  description: "cozsweet frontend (Next.js)",
 };
 
 export default function RootLayout({

src/data/api/index.ts

@@ -2,4 +2,14 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from "./index";
+export * from "./api_path";
+export * from "./api_result";
+export * from "./auth_api";
+export * from "./chat_api";
+export * from "./http_client";
+export * from "./metrics_api";
+export * from "./user_api";
+export * from "./config/api_config";
+export * from "./interceptor/auth_refresh_interceptor";
+export * from "./interceptor/logging_interceptor";
+export * from "./interceptor/token_interceptor";

src/data/storage/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from "./auth_storage";
 export * from "./local_storage";
 export * from "./result";
 export * from "./storage_keys";

src/design/border-widths.css

@@ -0,0 +1,14 @@
+/* ============================================================
+ * 设计系统 - 边框宽度变量
+ * 原始 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;
+}

src/design/colors.css

@@ -0,0 +1,58 @@
+/* ============================================================
+ * 设计系统 - 颜色变量
+ * 原始 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;
+}

src/design/icon-sizes.css

@@ -0,0 +1,19 @@
+/* ============================================================
+ * 设计系统 - 图标尺寸变量
+ * 原始 Dart: lib/design/icon_sizes.dart
+ * 集中管理应用图标尺寸数值
+ * ============================================================ */
+
+:root {
+  --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/design/radius.css

@@ -0,0 +1,15 @@
+/* ============================================================
+ * 设计系统 - 圆角变量
+ * 原始 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;
+}

src/design/spacing.css

@@ -0,0 +1,15 @@
+/* ============================================================
+ * 设计系统 - 间距变量
+ * 原始 Dart: lib/design/spacing.dart
+ * 集中管理应用间距数值
+ * ============================================================ */
+
+:root {
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+  --spacing-xxxl: 32px;
+}

src/design/typography.css

@@ -0,0 +1,25 @@
+/* ============================================================
+ * 设计系统 - 字体
+ * 原始 Dart: lib/design/fonts.dart + font_sizes.dart
+ *
+ * body 使用跨平台系统字体栈
+ * Athelas 为 Apple 平台专用字体
+ * ============================================================ */
+
+:root {
+  /* 字体族 */
+  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-athelas: "Athelas", serif;
+
+  /* 字体尺寸 */
+  --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;
+}

src/utils/device_identifier.ts

@@ -6,7 +6,7 @@
  *
  * 注：仅在浏览器环境可用；SSR/Server Components 中调用会抛错。
  */
-import { authStorage } from "../../storage/auth_storage";
+import { authStorage } from "../data/storage/auth_storage";
 
 export class DeviceIdentifier {
   private cachedId: string | null = null;

tsconfig.json

@@ -19,7 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": [