style(web-ui): neutral craft-like theme tokens

Author: ymkiux

web-ui/styles/base-theme.css

@@ -4,30 +4,34 @@
    设计系统 - Design Tokens
    ============================================ */
 :root {
-    /* 色彩系统：温和中性暖灰 + 柔粉强调 */
+    /* 色彩系统：中性灰（更贴近 craft/shadcn 观感）+ 品牌强调 */
     --color-brand: #C77462;
     --color-brand-dark: #B45E4E;
-    --color-brand-light: rgba(199, 116, 98, 0.14);
-    --color-brand-subtle: rgba(199, 116, 98, 0.2);
+    --color-brand-light: rgba(199, 116, 98, 0.12);
+    --color-brand-subtle: rgba(199, 116, 98, 0.18);
 
-    --color-bg: #F7F3EF;
-    --color-surface: #FFFDFC;
-    --color-surface-alt: #F8F3EE;
+    --color-bg: #FAFAFA;
+    --color-surface: #FFFFFF;
+    --color-surface-alt: #F4F4F5;
     --color-surface-elevated: #FFFFFF;
-    --color-surface-tint: rgba(255, 253, 252, 0.9);
-    --color-text-primary: #241F1C;
-    --color-text-secondary: #5A514B;
-    --color-text-tertiary: #7A6E66;
-    --color-text-muted: #A39286;
-    --color-border: #E7DDD4;
-    --color-border-soft: rgba(163, 146, 134, 0.22);
-    --color-border-strong: rgba(163, 146, 134, 0.4);
+    --color-surface-tint: rgba(255, 255, 255, 0.92);
+    --color-text-primary: #18181B;
+    --color-text-secondary: #3F3F46;
+    --color-text-tertiary: #71717A;
+    --color-text-muted: #A1A1AA;
+    --color-border: #E4E4E7;
+    --color-border-soft: rgba(24, 24, 27, 0.12);
+    --color-border-strong: rgba(24, 24, 27, 0.24);
 
     --color-success: #4B8B6A;
     --color-error: #C44536;
 
     --bg-warm-gradient:
-        linear-gradient(180deg, #F7F3EF 0%, #F7F3EF 100%);
+        linear-gradient(180deg, #FAFAFA 0%, #FAFAFA 100%);
+
+    --color-bg-topbar-strong: rgba(250, 250, 250, 0.96);
+    --color-bg-topbar-soft: rgba(250, 250, 250, 0.9);
+    --color-bg-topbar-clear: rgba(250, 250, 250, 0);
 
     /* 字体系统 */
     --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
@@ -63,21 +67,21 @@
     --radius-sm: 8px;
     --radius-md: 10px;
     --radius-lg: 12px;
-    --radius-xl: 18px;
+    --radius-xl: 16px;
     --radius-full: 50px;
 
-    /* 阴影系统 - 温和、轻量 */
-    --shadow-subtle: 0 1px 2px rgba(36, 31, 28, 0.03);
-    --shadow-card: 0 4px 12px rgba(36, 31, 28, 0.045);
-    --shadow-card-hover: 0 8px 22px rgba(36, 31, 28, 0.07);
-    --shadow-float: 0 12px 28px rgba(36, 31, 28, 0.1);
-    --shadow-raised: 0 8px 18px rgba(36, 31, 28, 0.08);
+    /* 阴影系统 - 更偏中性与克制 */
+    --shadow-subtle: 0 1px 2px rgba(24, 24, 27, 0.04);
+    --shadow-card: 0 1px 3px rgba(24, 24, 27, 0.06);
+    --shadow-card-hover: 0 8px 26px rgba(24, 24, 27, 0.12);
+    --shadow-float: 0 14px 36px rgba(24, 24, 27, 0.16);
+    --shadow-raised: 0 8px 18px rgba(24, 24, 27, 0.12);
     --shadow-modal:
-        0 8px 24px rgba(36, 31, 28, 0.08),
-        0 24px 64px rgba(36, 31, 28, 0.05);
+        0 10px 30px rgba(24, 24, 27, 0.14),
+        0 28px 72px rgba(24, 24, 27, 0.12);
     --shadow-input-focus:
         0 0 0 3px var(--color-brand-light),
-        0 1px 3px rgba(31, 26, 23, 0.04);
+        0 1px 2px rgba(24, 24, 27, 0.06);
 
     /* 动画 - 更细腻的曲线 */
     --transition-instant: 100ms;

web-ui/styles/layout-shell.css

@@ -185,7 +185,7 @@ body::after {
     content: "";
     position: absolute;
     inset: -12px -18px;
-    background: radial-gradient(circle at 50% 70%, rgba(247, 243, 239, 0.92), rgba(247, 243, 239, 0));
+    background: radial-gradient(circle at 50% 70%, rgba(250, 250, 250, 0.92), rgba(250, 250, 250, 0));
     filter: blur(2px);
     pointer-events: none;
 }

web-ui/styles/navigation-panels.css

@@ -6,8 +6,8 @@
 .main-tab-btn {
     flex: 1;
     text-align: center;
-    border: 1px solid rgba(216, 201, 184, 0.55);
-    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-tint);
     border-radius: var(--radius-lg);
     padding: 12px 14px;
     cursor: pointer;
@@ -26,9 +26,9 @@
 
 .main-tab-btn.active {
     border-color: var(--color-brand);
-    box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
+    box-shadow: var(--shadow-card-hover);
     color: var(--color-text-primary);
-    background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
+    background: linear-gradient(135deg, var(--color-brand-light), var(--color-surface-tint));
 }
 
 .status-strip {
@@ -52,7 +52,7 @@
 
 .lang-toggle-btn {
     border: 1px solid var(--color-border);
-    background: rgba(255, 255, 255, 0.75);
+    background: var(--color-surface-tint);
     border-radius: 10px;
     padding: 10px 12px;
     font-size: 12px;
@@ -63,7 +63,7 @@
 
 .lang-toggle-btn:hover {
     border-color: rgba(0, 0, 0, 0.22);
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--color-surface);
 }
 
 .lang-toggle-btn.active {
@@ -77,7 +77,7 @@
     max-width: 100%;
     padding: 6px 10px;
     border: 1px solid var(--color-border);
-    background: rgba(255, 253, 252, 0.82);
+    background: var(--color-surface-tint);
     box-shadow: none;
     display: inline-flex;
     flex-direction: row;
@@ -111,7 +111,7 @@
     padding: 10px 12px;
     border-radius: 10px;
     border: 1px solid var(--color-border);
-    background: rgba(255, 253, 252, 0.88);
+    background: var(--color-surface-tint);
     box-shadow: none;
     display: grid;
     gap: 6px;
@@ -183,7 +183,7 @@
     z-index: 12;
     margin: 0 -28px 14px;
     padding: 0 28px 12px;
-    background: linear-gradient(180deg, rgba(247, 243, 239, 0.96) 0%, rgba(247, 243, 239, 0.92) 78%, rgba(247, 243, 239, 0) 100%);
+    background: linear-gradient(180deg, var(--color-bg-topbar-strong) 0%, var(--color-bg-topbar-soft) 78%, var(--color-bg-topbar-clear) 100%);
     backdrop-filter: blur(8px);
 }