feat(frontend): 统一页面视觉与轻量动效

frontend/src/styles/tokens.css

@@ -45,16 +45,16 @@
   --color-border-disabled: #eef0f3;
 
   /* Shadow */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
+  --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.05), 0 1px 5px rgba(31, 35, 40, 0.03);
+  --shadow-md: 0 8px 22px rgba(31, 35, 40, 0.08), 0 2px 6px rgba(31, 35, 40, 0.04);
+  --shadow-lg: 0 16px 36px rgba(31, 35, 40, 0.11), 0 4px 12px rgba(31, 35, 40, 0.05);
+  --shadow-xl: 0 24px 64px rgba(31, 35, 40, 0.18), 0 8px 20px rgba(31, 35, 40, 0.08);
 
   /* Radius */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 10px;
-  --radius-xl: 14px;
+  --radius-sm: 6px;
+  --radius-md: 9px;
+  --radius-lg: 13px;
+  --radius-xl: 18px;
   --radius-full: 9999px;
 
   /* Spacing */
@@ -100,16 +100,16 @@
   --z-titlebar: 500;
 
   /* Motion */
-  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
-  --motion-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  --motion-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
+  --motion-normal: 190ms cubic-bezier(0.2, 0, 0, 1);
+  --motion-slow: 260ms cubic-bezier(0.2, 0, 0, 1);
 
   /* Layout */
-  --titlebar-height: 38px;
-  --sidebar-primary-width: 52px;
+  --titlebar-height: 42px;
+  --sidebar-primary-width: 58px;
   --sidebar-primary-width-expanded: 180px;
-  --sidebar-secondary-width: 260px;
-  --statusbar-height: 26px;
+  --sidebar-secondary-width: 272px;
+  --statusbar-height: 28px;
 }
 
 [data-theme='dark'] {
@@ -221,6 +221,25 @@ button {
   color: inherit;
 }
 
+button,
+a,
+input,
+textarea,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+
+input[type='checkbox'],
+input[type='radio'],
+input[type='range'] {
+  accent-color: var(--color-accent-primary);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
 input,
 textarea,
 select {
@@ -261,7 +280,25 @@ ol {
   color: var(--color-accent-primary);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 [data-theme='dark'] ::selection {
   background: var(--color-accent-primary);
   color: var(--color-text-inverse);
 }
+
+@media (max-width: 900px) {
+  :root {
+    --sidebar-primary-width-expanded: 160px;
+    --sidebar-secondary-width: 224px;
+  }
+}