From fbee37635bf4b288223d761a6f693682f3c3a18d Mon Sep 17 00:00:00 2001
From: enzo <enzo@enzo-r730xd-01>
Date: Wed, 22 Jul 2026 16:28:23 +0800
Subject: [PATCH] feat: CSS variable dual-theme system (dark default + light)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/main.tsx          |  1 +
 frontend/src/styles/tokens.css | 83 ++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 frontend/src/styles/tokens.css

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index f9be05c..090d525 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './styles/tokens.css'
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
new file mode 100644
index 0000000..c535cdb
--- /dev/null
+++ b/frontend/src/styles/tokens.css
@@ -0,0 +1,83 @@
+/* ===== 暗色模式（默认） ===== */
+:root {
+  --bg-root: #0f1117;
+  --bg-nav: #161822;
+  --bg-card: #1a1d2e;
+  --bg-hover: #1e2134;
+  --bg-elevated: #222639;
+  --border: #2a2d3e;
+  --border-light: rgba(42, 45, 62, 0.5);
+  --honey: #f0b90b;
+  --honey-dim: #b8970e;
+  --honey-glow: rgba(240, 185, 11, 0.12);
+  --green: #00c853;
+  --red: #ff3d3d;
+  --yellow: #ffab00;
+  --blue: #448aff;
+  --orange: #ff6d00;
+  --text: #e0e0e0;
+  --text-dim: #8b8d9a;
+  --text-muted: #5a5d6a;
+  --bg-success: #0d2818;
+  --bg-error: #2d0f0f;
+  --bg-warn: #2d2000;
+  --bg-info: #0d1b2d;
+  --radius: 8px;
+  --radius-sm: 4px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
+  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "SF Mono", "Fira Code", Consolas, monospace;
+  --header-h: 48px;
+  --sidebar-w: 220px;
+}
+
+/* ===== 浅色模式 ===== */
+[data-theme="light"] {
+  --bg-root: #f5f6fa;
+  --bg-nav: #ffffff;
+  --bg-card: #ffffff;
+  --bg-hover: #edf0f5;
+  --bg-elevated: #ffffff;
+  --border: #e2e5ee;
+  --border-light: rgba(0, 0, 0, 0.06);
+  --honey: #e5a800;
+  --honey-dim: #c48f00;
+  --honey-glow: rgba(229, 168, 0, 0.08);
+  --green: #008c3a;
+  --red: #d32f2f;
+  --yellow: #e65100;
+  --blue: #1565c0;
+  --orange: #d84315;
+  --text: #1a1d2e;
+  --text-dim: #555a6e;
+  --text-muted: #8b8f9e;
+  --bg-success: #e8f5e9;
+  --bg-error: #fdecea;
+  --bg-warn: #fff3e0;
+  --bg-info: #e3f2fd;
+  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.14);
+}
+
+/* ===== 全局基础 ===== */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font);
+  font-size: 13px;
+  background: var(--bg-root);
+  color: var(--text);
+}
+
+/* 主题切换过渡 */
+* {
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}