/* ============================================================ 小伍+ 统一设计 Token — CSS 自定义属性 源文件: /design-tokens.json 版本: 3.1.0 | 更新: 2026-09-05 使用方式: 在 HTML 中引入此文件， 然后在任何 CSS 规则中使用 var(--token-name)。 ============================================================ */ :root { --muted: var(--text-secondary); --surface-subtle: var(--surface-muted); /* ---- Brand ---- */ --brand: #C2410C; --brand-pressed: #9A340A; --brand-soft: #FFEDE4; --brand-subtle: #FFF7F2; /* ---- Canvas / Surface ---- */ --canvas: #F7F8FA; --surface: #ffffff; --surface-muted: #F2F5F9; /* ---- Text ---- */ --text: #1B2A4A; --text-secondary: #5A6B86; --text-tertiary: #5F6E8C; --text-inverse: #ffffff; /* ---- Border ---- */ --border: #E2E6EC; --border-strong: #CDD4DE; --border-subtle: #EDF0F5; /* ---- Sidebar (dark surface) ---- */ --sidebar-bg: #1B2A4A; --sidebar-text: #FFFFFF; --sidebar-text-muted: #CDD4DE; --sidebar-active: rgba(255, 255, 255, 0.08); /* ---- Semantic ---- */ --success: #248a3d; --success-soft: #e2f5e8; --warning: #b26a0a; --warning-soft: #fff4e5; --danger: #b4402e; --danger-soft: #fdeceb; --info: #1b4f7e; --info-soft: #e2f0ff; /* ---- Chat ---- */ --bubble-user: #1B2A4A; --bubble-assistant: #ffffff; --bubble-user-text: #ffffff; --bubble-assistant-text: #1B2A4A; /* ---- Spacing (4px base) ---- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 40px; /* ---- Radius ---- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Typography ---- */ --font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; --text-hero: 700 32px/38px var(--font-family); --text-title1: 700 28px/34px var(--font-family); --text-title2: 700 22px/28px var(--font-family); --text-headline: 600 17px/22px var(--font-family); --text-body: 400 16px/22px var(--font-family); --text-callout: 400 15px/20px var(--font-family); --text-subhead: 400 14px/19px var(--font-family); --text-footnote: 400 12px/16px var(--font-family); --text-caption: 600 11px/14px var(--font-family); /* ---- Shadow ---- */ --shadow-sm: 0 2px 8px rgba(22, 35, 31, 0.06); --shadow-md: 0 8px 18px rgba(22, 35, 31, 0.08); --shadow-lg: 0 12px 32px rgba(22, 35, 31, 0.10); --shadow-floating: 0 24px 70px rgba(22, 35, 31, 0.10); /* ---- Motion ---- */ --motion-quick: 160ms; --motion-standard: 240ms; --motion-gentle: 320ms; --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Z-Index ---- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100; } /* ============================================================ 暗色模式预留 (未来启用时取消注释) ============================================================ */ /* @media (prefers-color-scheme: dark) { :root { --brand: #2db88a; --brand-pressed: #25a578; --brand-soft: rgba(45, 184, 138, 0.12); --brand-subtle: rgba(45, 184, 138, 0.06); --canvas: #0f1410; --surface: #1a201d; --surface-muted: #161c19; --text: #EDF0F5; --text-secondary: #5F6E8C; --text-tertiary: #5A6B86; --text-inverse: #1B2A4A; --border: #2a322e; --border-strong: #3a443e; --border-subtle: #1e2521; --sidebar-bg: #0a1f1a; --sidebar-text: #d0e0d7; --sidebar-text-muted: #6a8a7d; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.3); --shadow-floating: 0 24px 70px rgba(0, 0, 0, 0.35); } } */