style(theme): 更新网站主题色彩方案与字体配置

- 调整主色调从 #1C1C1C 至 #1A1A1A，优化视觉层次
- 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等)
- 配置中文字体栈，添加 serif 字体支持
- 优化文本颜色梯度，提升可读性
- 调整边框颜色，统一水墨风格
- 添加 Google Search Console 验证码配置项
- 新增桌面应用架构专家代理配置文件
- 重构 E2E 测试等待策略，提升稳定性
- 添加回归测试脚本，增强质量保障

src/lib/constants/design-system.ts

@@ -1,3 +1,7 @@
+// Design System Constants — L3 Detail Pages
+// Color tokens reference global CSS variables for dark-mode support.
+// Layout / spacing / animation / easing remain as JS constants.
+
 export const DESIGN_SYSTEM = {
   animation: {
     duration: {
@@ -35,32 +39,33 @@ export const DESIGN_SYSTEM = {
     },
   },
 
+  // Typography classes reference CSS variables for theme-aware sizing
   typography: {
     hero: {
-      title: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight',
-      subtitle: 'text-lg md:text-xl text-stone-600 leading-relaxed',
-      description: 'text-base text-stone-500 mt-4 max-w-2xl',
+      title: 'text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-[var(--color-text-primary)]',
+      subtitle: 'text-lg md:text-xl leading-relaxed text-[var(--color-text-secondary)]',
+      description: 'text-base mt-4 max-w-2xl text-[var(--color-text-muted)]',
     },
     section: {
-      title: 'text-3xl md:text-4xl font-bold tracking-tight',
-      subtitle: 'text-lg text-gray-600 mt-2',
-      body: 'text-base leading-relaxed text-gray-700',
+      title: 'text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]',
+      subtitle: 'text-lg mt-2 text-[var(--color-text-secondary)]',
+      body: 'text-base leading-relaxed text-[var(--color-text-secondary)]',
     },
     card: {
-      title: 'text-lg font-semibold',
-      description: 'text-sm text-gray-600 leading-relaxed',
+      title: 'text-lg font-semibold text-[var(--color-text-primary)]',
+      description: 'text-sm leading-relaxed text-[var(--color-text-muted)]',
     },
   },
 
   effects: {
     inkGlow: {
-      border: 'conic-gradient(from var(--angle), transparent 0%, #C41E3A 10%, transparent 20%)',
-      glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(196, 30, 58, 0.15) 0%, transparent 50%)',
+      border: 'conic-gradient(from var(--angle), transparent 0%, var(--color-brand-primary) 10%, transparent 20%)',
+      glow: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--color-brand-primary-rgb), 0.15) 0%, transparent 50%)',
       speed: '3s',
     },
     hover: {
       translateY: '-4px',
-      shadow: 'shadow-xl shadow-gray-200/50',
+      shadow: 'shadow-xl shadow-[var(--color-shadow-color)]',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     },
     scroll: {
@@ -68,7 +73,7 @@ export const DESIGN_SYSTEM = {
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
         viewport: { once: true, margin: '-80px' },
-        transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] as const },
+        transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const },
       },
       staggerChildren: {
         delay: 0.08,
@@ -76,24 +81,26 @@ export const DESIGN_SYSTEM = {
     },
   },
 
+  // Color references map to CSS custom properties defined in globals.css
+  // These are used for inline styles where Tailwind classes aren't feasible
   colors: {
     brand: {
-      primary: '#C41E3A',
-      light: 'rgba(196, 30, 58, 0.08)',
-      lighter: 'rgba(196, 30, 58, 0.04)',
-      gradient: 'linear-gradient(135deg, #C41E3A 0%, #99182d 100%)',
+      primary: 'var(--color-brand-primary)',
+      light: 'var(--color-brand-primary-bg)',
+      lighter: 'rgba(var(--color-brand-primary-rgb), 0.04)',
+      gradient: 'linear-gradient(135deg, var(--color-brand-primary) 0%, #99182d 100%)',
     },
     neutral: {
-      50: '#fafafa',
-      100: '#f5f5f5',
-      200: '#e5e5e5',
-      300: '#d4d4d4',
-      400: '#a3a3a3',
-      500: '#737373',
-      600: '#525252',
-      700: '#404040',
-      800: '#262626',
-      900: '#171717',
+      50: 'var(--color-bg-primary)',
+      100: 'var(--color-bg-section)',
+      200: 'var(--color-border-primary)',
+      300: 'var(--color-text-hint)',
+      400: 'var(--color-text-subtle)',
+      500: 'var(--color-text-muted)',
+      600: 'var(--color-text-secondary)',
+      700: 'var(--color-text-primary)',
+      800: 'var(--color-text-primary)',
+      900: 'var(--color-text-primary)',
     },
     ink: {
       light: 'rgba(0, 0, 0, 0.03)',
@@ -104,29 +111,29 @@ export const DESIGN_SYSTEM = {
 
   components: {
     card: {
-      base: 'bg-white rounded-2xl border border-gray-100 overflow-hidden transition-all duration-300',
-      hover: 'hover:border-gray-200 hover:shadow-lg hover:-translate-y-1',
+      base: 'rounded-2xl border border-[var(--color-border-primary)] overflow-hidden transition-all duration-300 bg-[var(--color-surface-primary)]',
+      hover: 'hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] hover:shadow-lg hover:-translate-y-1',
       padding: 'p-6 lg:p-8',
     },
     badge: {
       base: 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
       variants: {
-        primary: 'bg-red-50 text-red-700',
-        secondary: 'bg-gray-100 text-gray-700',
+        primary: 'bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]',
+        secondary: 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]',
         success: 'bg-green-50 text-green-700',
         warning: 'bg-yellow-50 text-yellow-700',
       },
     },
     button: {
-      primary: 'inline-flex items-center gap-2 px-6 py-3 bg-[#C41E3A] text-white font-semibold rounded-lg shadow-md hover:bg-[#99182d] hover:shadow-lg transition-all duration-200',
-      secondary: 'inline-flex items-center gap-2 px-6 py-3 bg-white text-gray-700 font-semibold rounded-lg border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-all duration-200',
-      ghost: 'inline-flex items-center gap-2 px-4 py-2 text-[#C41E3A] font-medium hover:bg-red-50 rounded-lg transition-colors duration-200',
+      primary: 'inline-flex items-center gap-2 px-6 py-3 text-white font-semibold rounded-lg shadow-md transition-all duration-200 bg-[var(--color-brand-primary)] hover:brightness-110 hover:shadow-lg',
+      secondary: 'inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border transition-all duration-200 bg-[var(--color-surface-primary)] text-[var(--color-text-secondary)] border-[var(--color-border-primary)] hover:border-[var(--color-text-hint)] hover:shadow-sm',
+      ghost: 'inline-flex items-center gap-2 px-4 py-2 font-medium rounded-lg transition-colors duration-200 text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-bg)]',
     },
     metric: {
-      container: 'text-center p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100',
-      value: 'text-3xl md:text-4xl font-bold text-gray-900 mb-1',
-      label: 'text-sm text-gray-500',
-      description: 'text-xs text-gray-400 mt-1',
+      container: 'text-center p-6 rounded-xl border bg-[var(--color-bg-section)] border-[var(--color-border-primary)]',
+      value: 'text-3xl md:text-4xl font-bold mb-1 text-[var(--color-text-primary)]',
+      label: 'text-sm text-[var(--color-text-subtle)]',
+      description: 'text-xs mt-1 text-[var(--color-text-hint)]',
     },
   },
 };