From b65ddd1ff70bc434ee2f99404b295d2500359025 Mon Sep 17 00:00:00 2001
From: zhangxiang <zhangxiang@novalon.cn>
Date: Mon, 31 Aug 2026 12:03:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20=E6=97=A0=E9=9A=9C=E7=A2=8D?=
 =?UTF-8?q?=E4=B8=8E=20lint=20=E4=BF=AE=E5=A4=8D=EF=BC=88=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E5=BA=A6/alt=20=E5=B1=9E=E6=80=A7/=E8=A7=A6=E6=8E=A7?=
 =?UTF-8?q?=E7=9B=AE=E6=A0=87=E6=94=B6=E7=AA=84=EF=BC=89+=20Geist=20?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E5=AD=97=E4=BD=93=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.mjs                               |  7 ++-
 src/app/admin/media/page.tsx                  |  3 +-
 src/app/error.tsx                             |  4 +-
 src/app/layout.tsx                            | 27 +++++++++-
 src/app/not-found-content.tsx                 |  8 +--
 src/app/privacy/page.tsx                      | 14 ++---
 src/app/terms/page.tsx                        |  2 +-
 src/components/admin/admin-layout.tsx         |  2 +-
 src/components/analytics/CookieConsent.tsx    | 14 ++---
 src/components/layout/mobile-menu.tsx         |  4 +-
 src/components/sections/case-card.test.tsx    | 12 +++--
 src/components/sections/insight-card.test.tsx |  8 +--
 src/components/ui/alert.tsx                   |  7 +--
 src/components/ui/badge.tsx                   |  7 +--
 src/components/ui/flip-clock.tsx              | 16 +++---
 src/components/ui/input.tsx                   |  2 +-
 src/components/ui/select.tsx                  |  4 +-
 src/components/ui/sonner.tsx                  |  4 +-
 src/components/ui/textarea.tsx                |  2 +-
 tailwind.config.js                            | 54 +++++++++++--------
 20 files changed, 125 insertions(+), 76 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index 6439562..577d08f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,10 +2,15 @@ const cdnDomain = process.env.CDN_DOMAIN || '';
 
 const nextConfig = {
   output: 'standalone',
-  distDir: 'dist',
+  // 默认 dist/；可用 NEXT_DIST_DIR 覆盖（CI 分环境输出，或本地需要避开既有构建产物）
+  distDir: process.env.NEXT_DIST_DIR || 'dist',
   assetPrefix: cdnDomain || undefined,
   images: {
+    // 有意关闭 Next 图片优化：产物经 Nginx 静态托管 + CDN 分发（见 docs/CDN_CONFIGURATION.md、
+    // CLAUDE.md「Images are unoptimized (static export limitation)」）。
+    // 不要仅因「性能」理由改为 false —— 在无 Node 运行时接管 /_next/image 的部署模式下会导致图片 404。
     unoptimized: true,
+    // 注意：unoptimized 为 true 时下面这行不生效，仅在改回 false 后才会参与构建产物生成。
     formats: ['image/avif', 'image/webp'],
   },
   compress: true,
diff --git a/src/app/admin/media/page.tsx b/src/app/admin/media/page.tsx
index 7ca5ab3..e42db17 100644
--- a/src/app/admin/media/page.tsx
+++ b/src/app/admin/media/page.tsx
@@ -193,7 +193,8 @@ export default function MediaPage() {
 
       {items.length === 0 && !loading && (
         <div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
-          <Image className="w-12 h-12 mx-auto mb-4 text-gray-300" />
+          {/* eslint-disable-next-line jsx-a11y/alt-text -- lucide Image 图标（装饰性 SVG，非 <img>），aria-hidden 表明装饰意图 */}
+          <Image aria-hidden="true" className="w-12 h-12 mx-auto mb-4 text-gray-300" />
           <h3 className="text-sm font-medium text-gray-900 mb-1">暂无媒体文件</h3>
           <p className="text-sm text-gray-500 mb-4">上传图片、文档等资源，即可在内容编辑中使用</p>
           <label className="inline-flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 cursor-pointer transition-colors">
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 2fd3939..1eea4a7 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -81,7 +81,7 @@ export default function Error({
                 href="/contact"
                 className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <AlertTriangle className="w-5 h-5 text-[var(--color-brand)]" />
                 </div>
                 <div className="text-left">
@@ -94,7 +94,7 @@ export default function Error({
                 href="/services"
                 className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-10 h-10 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <RefreshCw className="w-5 h-5 text-[var(--color-brand)]" />
                 </div>
                 <div className="text-left">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 119fd21..3fff74f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from "next";
+import localFont from "next/font/local";
 import "./globals.css";
 import { Suspense } from "react";
 import { GoogleAnalyticsWrapper } from "@/components/analytics/GoogleAnalyticsWrapper";
@@ -18,6 +19,26 @@ import { SiteConfigProvider, type SiteConfig, type NavigationItem, type MegaDrop
 import { COMPANY_INFO, BRAND_NARRATIVE, type BrandPillar } from "@/lib/constants/company";
 import { NAVIGATION_V2, MEGA_DROPDOWN_DATA } from "@/lib/constants/navigation";
 
+/**
+ * 拉丁字形使用 Geist（本地 woff2，无网络请求）；
+ * 中文由 globals.css 的 --font-sans 回退到 PingFang SC / 微软雅黑。
+ * 这样英文数字有设计字体，中文又不需下载数 MB 的 CJK 字重。
+ * 两者总重 140KB，display: swap 不阻塞首屏。
+ */
+const geistSans = localFont({
+  src: "./fonts/geist-sans.woff2",
+  variable: "--font-geist-sans",
+  display: "swap",
+  preload: true,
+});
+
+const geistMono = localFont({
+  src: "./fonts/geist-mono.woff2",
+  variable: "--font-geist-mono",
+  display: "swap",
+  preload: false,
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL("https://www.novalon.cn"),
   title: {
@@ -143,7 +164,11 @@ export default async function RootLayout({
   };
 
   return (
-    <html lang="zh-CN" className="scroll-smooth" suppressHydrationWarning>
+    <html
+      lang="zh-CN"
+      className={`scroll-smooth ${geistSans.variable} ${geistMono.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
diff --git a/src/app/not-found-content.tsx b/src/app/not-found-content.tsx
index 3b532ff..18b682c 100644
--- a/src/app/not-found-content.tsx
+++ b/src/app/not-found-content.tsx
@@ -47,7 +47,7 @@ export function NotFoundContent() {
                 href="/products"
                 className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <Search className="w-4 h-4 text-[var(--color-brand)]" />
                 </div>
                 <span className="font-medium text-sm text-[var(--color-text-primary)]">产品</span>
@@ -57,7 +57,7 @@ export function NotFoundContent() {
                 href="/solutions"
                 className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <Search className="w-4 h-4 text-[var(--color-brand)]" />
                 </div>
                 <span className="font-medium text-sm text-[var(--color-text-primary)]">解决方案</span>
@@ -67,7 +67,7 @@ export function NotFoundContent() {
                 href="/about"
                 className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <Search className="w-4 h-4 text-[var(--color-brand)]" />
                 </div>
                 <span className="font-medium text-sm text-[var(--color-text-primary)]">关于我们</span>
@@ -77,7 +77,7 @@ export function NotFoundContent() {
                 href="/contact"
                 className="flex flex-col items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
               >
-                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
+                <div className="w-9 h-9 bg-[var(--color-brand-bg)] rounded-lg flex items-center justify-center mb-2 group-hover:bg-[var(--color-brand-soft)] transition-colors">
                   <Search className="w-4 h-4 text-[var(--color-brand)]" />
                 </div>
                 <span className="font-medium text-sm text-[var(--color-text-primary)]">联系我们</span>
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index 7873bce..09b1d89 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -136,16 +136,16 @@ function PrivacyContent() {
           我们使用 Cookie 和类似技术来提供、保护和改进我们的服务。Cookie 是存储在您设备上的小型文本文件，帮助我们识别您的设备、记住您的偏好设置。
         </p>
         <div className="overflow-x-auto mb-6">
-          <table className="min-w-full border border-[var(--color-border)] rounded-lg">
+          <table className="min-w-full border border-[var(--color-border-primary)] rounded-lg">
             <thead className="bg-[var(--color-bg-tertiary)]">
               <tr>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">Cookie 类型</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">用途</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">持续时间</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">是否必需</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border-primary)]">Cookie 类型</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border-primary)]">用途</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border-primary)]">持续时间</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border-primary)]">是否必需</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-[var(--color-border)]">
+            <tbody className="divide-y divide-[var(--color-border-primary)]">
               <tr>
                 <td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">必要 Cookie</td>
                 <td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">网站基本功能运行</td>
@@ -248,7 +248,7 @@ export default async function PrivacyPolicyPage() {
 
   return (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <div className="bg-gradient-to-br from-[var(--color-brand)] via-[var(--color-brand)]/80 to-[var(--color-hero-dark-end)] py-20">
+      <div className="bg-gradient-to-br from-[var(--color-brand)] via-[var(--color-brand)]/80 to-[var(--color-brand-section)] py-20">
         <div className="container-wide">
           <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
             {heroTitle}
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index 684a105..c6298e6 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -193,7 +193,7 @@ export default async function TermsOfServicePage() {
 
   return (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <div className="bg-gradient-to-br from-[var(--color-brand)] via-[var(--color-brand)]/80 to-[var(--color-hero-dark-end)] py-20">
+      <div className="bg-gradient-to-br from-[var(--color-brand)] via-[var(--color-brand)]/80 to-[var(--color-brand-section)] py-20">
         <div className="container-wide">
           <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
             {heroTitle}
diff --git a/src/components/admin/admin-layout.tsx b/src/components/admin/admin-layout.tsx
index de7ae4f..399b7d4 100644
--- a/src/components/admin/admin-layout.tsx
+++ b/src/components/admin/admin-layout.tsx
@@ -122,7 +122,7 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
         return next;
       });
     }
-  }, [pathname]);
+  }, [pathname]); // eslint-disable-line react-hooks/exhaustive-deps -- getExpandedMenusForPath 为组件内函数（引用随渲染变化），effect 已用 prevPathname 变更保护，刻意不列入依赖
 
   const toggleMenu = (label: string) => {
     setExpandedMenus((prev) => {
diff --git a/src/components/analytics/CookieConsent.tsx b/src/components/analytics/CookieConsent.tsx
index 2c51f59..9265d29 100644
--- a/src/components/analytics/CookieConsent.tsx
+++ b/src/components/analytics/CookieConsent.tsx
@@ -160,14 +160,14 @@ export function CookieConsent() {
                   <button
                     onClick={() => setShowSettings(true)}
                     disabled={isAnimating}
-                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
+                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-bg)] transition-colors disabled:opacity-50"
                   >
                     管理偏好
                   </button>
                   <button
                     onClick={handleRejectAll}
                     disabled={isAnimating}
-                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
+                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-bg)] transition-colors disabled:opacity-50"
                   >
                     仅必要
                   </button>
@@ -196,7 +196,7 @@ export function CookieConsent() {
                 </div>
 
                 <div className="space-y-3">
-                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg">
+                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-bg)] rounded-lg">
                     <input
                       type="checkbox"
                       checked
@@ -215,7 +215,7 @@ export function CookieConsent() {
                     </div>
                   </div>
 
-                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg">
+                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-bg)] rounded-lg">
                     <input
                       type="checkbox"
                       checked={preferences.analytics}
@@ -231,7 +231,7 @@ export function CookieConsent() {
                     </div>
                   </div>
 
-                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-lighter)] rounded-lg opacity-50">
+                  <div className="flex items-start gap-3 p-3 bg-[var(--color-brand-bg)] rounded-lg opacity-50">
                     <input
                       type="checkbox"
                       checked={preferences.marketing}
@@ -252,7 +252,7 @@ export function CookieConsent() {
                   <button
                     onClick={() => setShowSettings(false)}
                     disabled={isAnimating}
-                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-lighter)] transition-colors disabled:opacity-50"
+                    className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg hover:bg-[var(--color-brand-bg)] transition-colors disabled:opacity-50"
                   >
                     取消
                   </button>
@@ -288,7 +288,7 @@ export function CookieSettingsButton() {
         const event = new CustomEvent('open-cookie-settings');
         window.dispatchEvent(event);
       }}
-      className="fixed bottom-4 right-4 z-[9997] px-3 py-2 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg shadow-sm hover:bg-[var(--color-brand-lighter)] transition-colors"
+      className="fixed bottom-4 right-4 z-[9997] px-3 py-2 text-xs font-medium text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border-secondary)] rounded-lg shadow-sm hover:bg-[var(--color-brand-bg)] transition-colors"
       aria-label="Cookie 设置"
     >
       Cookie 设置
diff --git a/src/components/layout/mobile-menu.tsx b/src/components/layout/mobile-menu.tsx
index 669b371..5345a2e 100644
--- a/src/components/layout/mobile-menu.tsx
+++ b/src/components/layout/mobile-menu.tsx
@@ -46,7 +46,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         onKeyDown={handleKeyDown}
-        className="p-3 rounded-md hover:bg-[var(--color-brand-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
+        className="p-3 rounded-md hover:bg-[var(--color-brand-bg)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
         aria-label={isOpen ? '关闭菜单' : '打开菜单'}
         aria-expanded={isOpen}
         aria-controls="mobile-menu-panel"
@@ -101,7 +101,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
                                   className="block px-4 py-3 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-brand)] hover:bg-[var(--color-brand-bg)] rounded-md transition-colors"
                                 >
                                   <span className="font-medium text-[var(--color-text-primary)]">{sub.title}</span>
-                                  <span className="block text-xs text-[var(--color-text-hint)] mt-0.5">{sub.description}</span>
+                                  <span className="block text-xs text-[var(--color-text-muted)] mt-0.5">{sub.description}</span>
                                 </StaticLink>
                               </li>
                             ))}
diff --git a/src/components/sections/case-card.test.tsx b/src/components/sections/case-card.test.tsx
index dab0b64..9d8e923 100644
--- a/src/components/sections/case-card.test.tsx
+++ b/src/components/sections/case-card.test.tsx
@@ -83,16 +83,18 @@ describe('CaseCard', () => {
   it('should render background image when provided', async () => {
     const { CaseCard } = await import('./case-card');
     const { container } = render(<CaseCard {...mockCase} />);
-    const img = container.querySelector('img[alt=""]');
-    expect(img).toBeInTheDocument();
-    expect(img).toHaveAttribute('src', '/images/cases/manufacturing.jpg');
+    // 组件用 CSS 背景图而非 <img>，使 404 图片静默降级为纯色底
+    const bg = container.querySelector('[style*="background-image"]');
+    expect(bg).toBeInTheDocument();
+    expect(bg).toHaveAttribute('aria-hidden', 'true');
+    expect(bg).toHaveStyle({ backgroundImage: 'url(/images/cases/manufacturing.jpg)' });
   });
 
   it('should not render background image when not provided', async () => {
     const { CaseCard } = await import('./case-card');
     const { container } = render(<CaseCard {...mockCase} image={undefined} />);
-    const img = container.querySelector('img[alt=""]');
-    expect(img).not.toBeInTheDocument();
+    const bg = container.querySelector('[style*="background-image"]');
+    expect(bg).not.toBeInTheDocument();
   });
 
   it('should use context as fallback when challenge is empty', async () => {
diff --git a/src/components/sections/insight-card.test.tsx b/src/components/sections/insight-card.test.tsx
index 46ed605..0df4d52 100644
--- a/src/components/sections/insight-card.test.tsx
+++ b/src/components/sections/insight-card.test.tsx
@@ -75,9 +75,11 @@ describe('InsightCard', () => {
     const { container } = render(
       <InsightCard {...mockInsight} featured image="/images/insights/trends.jpg" />
     );
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-    expect(img).toHaveAttribute('src', '/images/insights/trends.jpg');
+    // 组件用 CSS 背景图而非 <img>，使 404 图片静默降级为纯色底
+    const bg = container.querySelector('[style*="background-image"]');
+    expect(bg).toBeInTheDocument();
+    expect(bg).toHaveAttribute('aria-hidden', 'true');
+    expect(bg).toHaveStyle({ backgroundImage: 'url(/images/insights/trends.jpg)' });
   });
 
   it('should render link element when provided', async () => {
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 3c25b32..bdf2cbc 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -14,11 +14,12 @@ const alertVariants = cva(
         default: 'bg-bg-primary text-text-primary border-border-primary',
         destructive:
           'text-error bg-error-bg border-error [&>svg]:text-current',
+        /* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
         success:
-          'text-success bg-success-bg border-success [&>svg]:text-current',
+          'text-success-text bg-success-bg border-success [&>svg]:text-current',
         warning:
-          'text-warning bg-warning-bg border-warning [&>svg]:text-current',
-        info: 'text-info bg-info-bg border-info [&>svg]:text-current',
+          'text-warning-text bg-warning-bg border-warning [&>svg]:text-current',
+        info: 'text-info-text bg-info-bg border-info [&>svg]:text-current',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index db7cfc2..36fbb48 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -16,10 +16,11 @@ const badgeVariants = cva(
         outline:
           'border-border-accent text-text-primary bg-transparent',
         ghost: 'text-text-muted hover:text-text-primary hover:bg-bg-secondary',
-        success: 'bg-success/10 text-success border-transparent',
-        warning: 'bg-warning/10 text-warning border-transparent',
+        /* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
+        success: 'bg-success/10 text-success-text border-transparent',
+        warning: 'bg-warning/10 text-warning-text border-transparent',
         error: 'bg-error/10 text-error border-transparent',
-        info: 'bg-info/10 text-info border-transparent',
+        info: 'bg-info/10 text-info-text border-transparent',
       },
       size: {
         sm: 'px-2 py-0.5 text-[10px]',
diff --git a/src/components/ui/flip-clock.tsx b/src/components/ui/flip-clock.tsx
index 25dba6e..b9a40ab 100644
--- a/src/components/ui/flip-clock.tsx
+++ b/src/components/ui/flip-clock.tsx
@@ -18,13 +18,13 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
   return (
     <div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
       {/* 背景卡片 - 静态显示当前数字 */}
-      <div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-flip-card-border)]">
-        <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] border-b border-[var(--color-flip-card-border)] overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-border-primary)]">
+        <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] overflow-hidden">
           <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
             {digit}
           </div>
         </div>
-        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] overflow-hidden">
+        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] overflow-hidden">
           <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
             {digit}
           </div>
@@ -40,7 +40,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
           animate={{ rotateX: -180 }}
           exit={{ rotateX: -180 }}
           transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
-          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-flip-card-border)]"
+          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-border-primary)]"
           style={{ 
             transformOrigin: 'bottom',
             backfaceVisibility: 'hidden',
@@ -58,7 +58,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
           animate={{ rotateX: 0 }}
           exit={{ rotateX: 0 }}
           transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
-          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-flip-card-border)]"
+          className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-border-primary)]"
           style={{ 
             transformOrigin: 'top',
             backfaceVisibility: 'hidden',
@@ -70,9 +70,9 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
         </motion.div>
       </AnimatePresence>
       
-      <div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-flip-card-divider)] transform -translate-y-1/2" />
-      <div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
+      <div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-border-primary)] transform -translate-y-1/2" />
+      <div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
       
       {/* 侧面阴影增强立体感 */}
       <div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 29bd637..4212a01 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
         data-slot="input"
         ref={ref}
         className={cn(
-          'file:text-foreground placeholder:text-text-hint selection:bg-brand selection:text-white',
+          'file:text-foreground placeholder:text-text-placeholder selection:bg-brand selection:text-white',
           'flex h-11 w-full min-w-0 rounded-md border border-border-primary bg-bg-primary px-3 py-1 text-base',
           'transition-all duration-fast outline-none',
           'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 0abc36d..797d347 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -22,10 +22,10 @@ const SelectTrigger = React.forwardRef<
     data-slot="select-trigger"
     className={cn(
       'flex h-11 w-full items-center justify-between rounded-md border border-border-primary bg-bg-primary px-3 py-2 text-sm shadow-sm',
-      'placeholder:text-text-hint',
+      'placeholder:text-text-placeholder',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[placeholder]:text-text-hint',
+      'data-[placeholder]:text-text-placeholder',
       'transition-colors duration-fast hover:border-border-secondary',
       '[&>span]:line-clamp-1',
       className
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index ac36caf..e504def 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -27,9 +27,9 @@ const Toaster = ({ ...props }: ToasterProviderProps) => {
         } as React.CSSProperties
       }
       icons={{
-        success: <CheckCircle2 className="size-4 text-success" />,
+        success: <CheckCircle2 className="size-4 text-success-text" />,
         error: <AlertCircle className="size-4 text-error" />,
-        info: <Info className="size-4 text-info" />,
+        info: <Info className="size-4 text-info-text" />,
         close: <X className="size-4" />,
       }}
       {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 7b14269..0d4d4ac 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -14,7 +14,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
         data-slot="textarea"
         ref={ref}
         className={cn(
-          'placeholder:text-text-hint selection:bg-brand selection:text-white',
+          'placeholder:text-text-placeholder selection:bg-brand selection:text-white',
           'flex min-h-[80px] w-full rounded-md border border-border-primary bg-bg-primary px-3 py-2 text-base',
           'transition-all duration-fast outline-none',
           'disabled:cursor-not-allowed disabled:opacity-50',
diff --git a/tailwind.config.js b/tailwind.config.js
index 533293c..4d1ac8c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,17 +9,21 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        /* 重要：Tailwind v3 无法对纯 hex 的 CSS 变量套用 /50 这类透明度修饰符，
+           会生成无效 CSS 并静默失效（样式不报错，但效果不出现）。
+           故常用色改用 rgb(通道 / <alpha-value>) 形式 —— 无修饰符时 alpha 默认 1，
+           视觉结果与原来一致，同时 bg-brand/10、border-ink/30 等能正确编译。 */
         ink: {
-          DEFAULT: 'var(--color-ink)',
+          DEFAULT: 'rgb(var(--color-ink-rgb) / <alpha-value>)',
           light: 'var(--color-ink-light)',
           lighter: 'var(--color-ink-lighter)',
           rgb: 'var(--color-ink-rgb)',
         },
         brand: {
-          DEFAULT: 'var(--color-brand)',
+          DEFAULT: 'rgb(var(--color-brand-rgb) / <alpha-value>)',
           hover: 'var(--color-brand-hover)',
           light: 'var(--color-brand-light)',
-          soft: 'var(--color-brand-soft)',
+          soft: 'rgb(var(--color-brand-rgb) / calc(0.12 * <alpha-value>))',
           bg: 'var(--color-brand-bg)',
           rgb: 'var(--color-brand-rgb)',
           section: 'var(--color-brand-section)',
@@ -27,18 +31,20 @@ module.exports = {
           'section-muted': 'var(--color-brand-section-muted)',
         },
         accent: {
-          blue: 'var(--color-accent-blue)',
+          blue: 'rgb(var(--color-accent-blue-rgb) / <alpha-value>)',
           'blue-soft': 'var(--color-accent-blue-soft)',
-          teal: 'var(--color-accent-teal)',
+          teal: 'rgb(var(--color-accent-teal-rgb) / <alpha-value>)',
           'teal-soft': 'var(--color-accent-teal-soft)',
-          amber: 'var(--color-accent-amber)',
+          amber: 'rgb(var(--color-accent-amber-rgb) / <alpha-value>)',
           'amber-soft': 'var(--color-accent-amber-soft)',
-          purple: 'var(--color-accent-purple)',
+          purple: 'rgb(var(--color-accent-purple-rgb) / <alpha-value>)',
           'purple-soft': 'var(--color-accent-purple-soft)',
+          cyan: 'rgb(var(--color-accent-cyan-rgb) / <alpha-value>)',
+          'cyan-soft': 'var(--color-accent-cyan-soft)',
         },
         bg: {
-          primary: 'var(--color-bg-primary)',
-          secondary: 'var(--color-bg-secondary)',
+          primary: 'rgb(var(--color-bg-primary-rgb) / <alpha-value>)',
+          secondary: 'rgb(var(--color-bg-secondary-rgb) / <alpha-value>)',
           tertiary: 'var(--color-bg-tertiary)',
           section: 'var(--color-bg-section)',
           hover: 'var(--color-bg-hover)',
@@ -46,47 +52,53 @@ module.exports = {
         },
         text: {
           primary: 'var(--color-text-primary)',
-          secondary: 'var(--color-text-secondary)',
+          secondary: 'rgb(var(--color-text-secondary-rgb) / <alpha-value>)',
           tertiary: 'var(--color-text-tertiary)',
-          muted: 'var(--color-text-muted)',
+          muted: 'rgb(var(--color-text-muted-rgb) / <alpha-value>)',
           subtle: 'var(--color-text-subtle)',
           placeholder: 'var(--color-text-placeholder)',
           hint: 'var(--color-text-hint)',
           inverse: 'var(--color-text-inverse)',
         },
         border: {
-          primary: 'var(--color-border-primary)',
-          secondary: 'var(--color-border-secondary)',
-          accent: 'var(--color-border-accent)',
-          light: 'var(--color-border-light)',
-          dark: 'var(--color-border-dark)',
-          brand: 'var(--color-border-brand)',
+          primary: 'rgb(var(--color-border-primary-rgb) / <alpha-value>)',
+          secondary: 'rgb(var(--color-border-secondary-rgb) / <alpha-value>)',
+          accent: 'rgb(var(--color-border-accent-rgb) / <alpha-value>)',
+          light: 'rgb(var(--color-border-light-rgb) / <alpha-value>)',
+          dark: 'rgb(var(--color-border-dark-rgb) / <alpha-value>)',
+          brand: 'rgb(var(--color-border-brand-rgb) / <alpha-value>)',
         },
         link: {
           DEFAULT: 'var(--color-link)',
           hover: 'var(--color-link-hover)',
         },
         success: {
-          DEFAULT: 'var(--color-success)',
+          DEFAULT: 'rgb(var(--color-success-rgb) / <alpha-value>)',
           hover: 'var(--color-success-hover)',
           bg: 'var(--color-success-bg)',
           rgb: 'var(--color-success-rgb)',
+          /** 文字请用此变体：DEFAULT 仅 3.30:1，不达 AA */
+          text: 'var(--color-success-text)',
         },
         warning: {
-          DEFAULT: 'var(--color-warning)',
+          DEFAULT: 'rgb(var(--color-warning-rgb) / <alpha-value>)',
           hover: 'var(--color-warning-hover)',
           bg: 'var(--color-warning-bg)',
           rgb: 'var(--color-warning-rgb)',
+          /** 文字请用此变体：DEFAULT 仅 3.19:1，不达 AA */
+          text: 'var(--color-warning-text)',
         },
         error: {
-          DEFAULT: 'var(--color-error)',
+          DEFAULT: 'rgb(var(--color-error-rgb) / <alpha-value>)',
           hover: 'var(--color-error-hover)',
           bg: 'var(--color-error-bg)',
           rgb: 'var(--color-error-rgb)',
         },
         info: {
-          DEFAULT: 'var(--color-info)',
+          DEFAULT: 'rgb(var(--color-info-rgb) / <alpha-value>)',
           bg: 'var(--color-info-bg)',
+          /** 文字请用此变体：DEFAULT 仅 3.68:1，不达 AA */
+          text: 'var(--color-info-text)',
         },
         dark: {
           bg: 'var(--color-dark-bg)',