/* ============================================================ iAgent Design Tokens — Cream 时代（v0.4 切换自 chat6 高保真稿） 锚定 #7C5CFF（violet brand）+ #FCFBF8（cream canvas）+ #FF8A65（coral accent） Source: design handoff 2026-05-19 / chat6 ---------------------------------------------------------------- 说明：var 命名延续 navy 时期 (--brand-* / --slate-* / --bg-* / --text-*) 只把值映射到 cream/warm/ink 系，避免几十个组件单点改 hex。 ============================================================ */ :root { /* ----- Brand: violet (chat6) ----- */ --brand-50: #f5f2ff; --brand-100: #ece6ff; --brand-200: #d6cbff; --brand-300: #b6a1ff; --brand-400: #9b83ff; --brand-500: #7c5cff; /* PRIMARY — Stripe violet 暖化版 */ --brand-600: #6b4def; --brand-700: #5a3fe0; --brand-800: #4732b0; --brand-900: #2f2380; --brand-950: #1b1450; /* ----- Coral: cream 系第二主色 ----- */ --coral-50: #fff1e9; --coral-100: #ffe3d6; --coral-200: #ffcdb8; --coral-500: #ff8a65; --coral-600: #f26c45; --coral-700: #c44e2c; /* ----- Warm neutral (取代 navy slate) — 暖 cream ramp ----- */ --slate-0: #ffffff; --slate-50: #fcfbf8; /* cream — 主 canvas */ --slate-100: #f8f5ef; /* warm-50 */ --slate-150: #f4f1eb; /* warm-100 */ --slate-200: #e8e4dc; /* warm-200 — 主 line */ --slate-300: #d9d3c7; /* warm-300 */ --slate-400: #bfb6a4; /* warm-400 */ --slate-500: #8e867d; /* ink-400 */ --slate-600: #6b6259; /* ink-500 */ --slate-700: #3a332b; /* ink-700 */ --slate-800: #2c2620; --slate-850: #221e19; --slate-900: #1f1b16; /* ink-900 — 主 text */ --slate-950: #14110e; --slate-1000: #0a0805; /* ----- Cream-era 直接别名（便于 chat6 风格组件直接用） ----- */ --cream: #fcfbf8; --warm-50: #f8f5ef; --warm-100: #f4f1eb; --warm-200: #e8e4dc; --warm-300: #d9d3c7; --warm-400: #bfb6a4; --ink-900: #1f1b16; --ink-700: #3a332b; --ink-500: #6b6259; --ink-400: #8e867d; --ink-300: #b5aea5; --ink-200: #d6d0c5; --violet-50: var(--brand-50); --violet-100: var(--brand-100); --violet-200: var(--brand-200); --violet-400: var(--brand-400); --violet-500: var(--brand-500); --violet-600: var(--brand-600); --violet-700: var(--brand-700); /* ----- Semantic ----- */ --success-50: #e9f8ee; --success-100: #d1f5dc; --success-500: #34c759; --success-600: #1f8a4c; --success-700: #166d3b; --warning-50: #fff7e6; --warning-100: #fde8b8; --warning-500: #ffb020; --warning-600: #e08a00; --warning-700: #b46900; --danger-50: #ffeded; --danger-100: #ffd1d1; --danger-500: #ff6b6b; --danger-600: #d94545; --danger-700: #ad2f2f; --info-50: var(--brand-50); --info-500: var(--brand-500); --info-600: var(--brand-600); /* ----- Finance dual — cream 版色弱友好 ----- */ --debit-500: #0e7fb8; --debit-50: #e6f4fb; --credit-500: #c44e2c; /* 贷 — 与 coral 同源 */ --credit-50: #ffe3d6; --profit-500: #1f8a4c; --loss-500: #d94545; /* ----- Agent state (5 态) ----- */ --agent-online: var(--brand-500); --agent-think: var(--brand-400); --agent-hitl: var(--warning-500); --agent-offline: var(--slate-400); --agent-error: var(--danger-500); /* ----- Surface (cream light mode default) ----- */ --bg-app: var(--warm-50); --bg-canvas: var(--cream); --bg-raised: #ffffff; --bg-sunken: var(--warm-100); --bg-hover: var(--warm-100); --bg-active: var(--warm-200); --bg-overlay: rgba(31, 27, 22, 0.32); --line-subtle: var(--warm-100); --line: var(--warm-200); --line-strong: var(--warm-300); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --text-disabled: var(--ink-400); --text-onbrand: #ffffff; --text-link: var(--brand-700); /* Focus ring — cream 紫罗兰 */ --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-500); /* ----- Shadow (ink-tinted, 无 glow) ----- */ --shadow-xs: 0 1px 2px rgba(31, 27, 22, 0.04); --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.04), 0 2px 8px rgba(31, 27, 22, 0.04); --shadow-md: 0 4px 14px rgba(31, 27, 22, 0.05), 0 12px 32px rgba(31, 27, 22, 0.06); --shadow-lg: 0 8px 32px rgba(31, 27, 22, 0.06), 0 24px 64px rgba(31, 27, 22, 0.08); --shadow-pop: 0 16px 48px -12px rgba(31, 27, 22, 0.18); --shadow-violet: 0 8px 24px rgba(124, 92, 255, 0.22), 0 2px 8px rgba(124, 92, 255, 0.18); /* ----- Radius (cream 偏圆润) ----- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px; /* ----- Spacing base = 4px ----- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ----- Type ----- */ --font-sans: "PingFang SC", "Helvetica Neue", "OPPO Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Geist Mono", ui-monospace, "Menlo", monospace; --font-num: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --t-xs: 11px; --lh-xs: 16px; --t-sm: 12px; --lh-sm: 18px; --t-md: 13px; --lh-md: 20px; --t-base: 14px; --lh-base: 22px; --t-lg: 16px; --lh-lg: 24px; --t-xl: 20px; --lh-xl: 28px; --t-2xl: 24px; --lh-2xl: 32px; --t-3xl: 30px; --lh-3xl: 38px; --t-4xl: 38px; --lh-4xl: 46px; /* ----- Motion ----- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 120ms; --d-base: 180ms; --d-slow: 260ms; } /* ============================================================ Dark mode — cream 系暗调（ink 加深 + violet 抬亮） ============================================================ */ [data-theme="dark"] { --bg-app: #14110e; --bg-canvas: #1f1b16; --bg-raised: #2c2620; --bg-sunken: #14110e; --bg-hover: #2c2620; --bg-active: #3a332b; --bg-overlay: rgba(0, 0, 0, 0.60); --line-subtle: rgba(255, 245, 230, 0.06); --line: rgba(255, 245, 230, 0.10); --line-strong: rgba(255, 245, 230, 0.18); --text-primary: #f4f1eb; --text-secondary: #d6d0c5; --text-tertiary: #b5aea5; --text-disabled: #6b6259; --text-link: var(--brand-300); --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-400); --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.55); --shadow-pop: 0 24px 56px -12px rgba(0, 0, 0, 0.70); --debit-500: #38bdf8; --credit-500: #ff9b6b; --profit-500: #34d399; --loss-500: #f87171; }