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.

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;
-  --foreground: #171717;
-}
+/* ============================================================
+ * 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
+ * ============================================================ */
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* ==================== 颜色 ==================== */
+  --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);
+
+  /* ==================== 间距 ==================== */
+  --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);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-page-background);
+  color: var(--color-text-foreground);
+  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",
-  description: "Generated by create next app",
+  title: "cozsweet",
+  description: "cozsweet frontend (Next.js)",
 };
 
 export default function RootLayout({