R67 A1-A6：官网风格前端 UI 刷新

client/src/design/theme.css

@@ -1,25 +1,31 @@
 :root {
-  --color-bg-canvas: #f5f7fa;
+  --color-bg-canvas: #f5f7f8;
+  --color-bg-canvas-deep: #e8eef5;
   --color-bg-surface: #ffffff;
-  --color-bg-surface-subtle: #fafafb;
-  --color-bg-primary-soft: #f2f5f8;
-  --color-text-primary: #111827;
-  --color-text-secondary: #667085;
-  --color-text-tertiary: #98a2b3;
-  --color-border-default: #e4e7ec;
-  --color-border-strong: #d0d5dd;
-  --color-accent-primary: #111827;
-  --color-accent-primary-hover: #1f2937;
+  --color-bg-surface-subtle: #f8fafc;
+  --color-bg-surface-raised: rgba(255, 255, 255, 0.92);
+  --color-bg-primary-soft: #e6ecf4;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #94a3b8;
+  --color-border-default: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-accent-primary: #00398a;
+  --color-accent-primary-hover: #002e6e;
+  --color-accent-secondary: #13a8b8;
+  --color-accent-ink: #001f4d;
   --color-success: #067647;
   --color-warning: #b54708;
   --color-danger: #b42318;
-  --color-info: #155eef;
+  --color-info: #00398a;
   --radius-sm: 0.5rem;
   --radius-md: 0.75rem;
   --radius-lg: 1rem;
   --radius-xl: 1.25rem;
-  --radius-panel: 1rem;
-  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
-  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
-  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
+  --radius-2xl: 1.5rem;
+  --radius-panel: 1.25rem;
+  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow-md: 0 22px 55px rgba(0, 57, 138, 0.14);
+  --shadow-focus: 0 0 0 4px rgba(0, 57, 138, 0.14);
 }

client/src/design/tokens.ts

@@ -1,32 +1,38 @@
 export const semanticTokens = {
   colors: {
-    bgCanvas: "#f5f7fa",
+    bgCanvas: "#f5f7f8",
+    bgCanvasDeep: "#e8eef5",
     bgSurface: "#ffffff",
-    bgSurfaceSubtle: "#fafafb",
-    bgPrimarySoft: "#f2f5f8",
-    textPrimary: "#111827",
-    textSecondary: "#667085",
-    textTertiary: "#98a2b3",
-    borderDefault: "#e4e7ec",
-    borderStrong: "#d0d5dd",
-    accentPrimary: "#111827",
-    accentPrimaryHover: "#1f2937",
+    bgSurfaceSubtle: "#f8fafc",
+    bgSurfaceRaised: "rgba(255, 255, 255, 0.92)",
+    bgPrimarySoft: "#e6ecf4",
+    textPrimary: "#0f172a",
+    textSecondary: "#475569",
+    textTertiary: "#94a3b8",
+    borderDefault: "#e2e8f0",
+    borderStrong: "#cbd5e1",
+    accentPrimary: "#00398a",
+    accentPrimaryHover: "#002e6e",
+    accentSecondary: "#13a8b8",
+    accentInk: "#001f4d",
     success: "#067647",
     warning: "#b54708",
     danger: "#b42318",
-    info: "#155eef",
+    info: "#00398a",
   },
   radius: {
     sm: "0.5rem",
     md: "0.75rem",
     lg: "1rem",
     xl: "1.25rem",
-    panel: "1rem",
+    "2xl": "1.5rem",
+    panel: "1.25rem",
   },
   shadow: {
-    xs: "0 1px 2px rgba(16, 24, 40, 0.04)",
-    sm: "0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04)",
-    md: "0 8px 24px rgba(16, 24, 40, 0.08)",
+    xs: "0 1px 2px rgba(15, 23, 42, 0.05)",
+    sm: "0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05)",
+    md: "0 22px 55px rgba(0, 57, 138, 0.14)",
+    focus: "0 0 0 4px rgba(0, 57, 138, 0.14)",
   },
   spacing: {
     pageX: "1.5rem",