/* ============================================================================ * Design Tokens — 单一真相源 * ---------------------------------------------------------------------------- * 所有颜色 / 间距 / 字号 / 阴影 / 圆角只允许从这里取，任何页面/组件不再硬写 #xxx。 * * 设计基调："简约 · 高级感" — 纯白底 + 克制中性近黑文字 + 青蓝只做交互点缀 * （2026-06-21 以 Claude Code 界面为结构参照、强调色定为低饱和青蓝，见 memory ui-aesthetic-baseline） * - 底色纯白不发黄；大面积留白是设计本身 * - 文字中性近黑，克制；层次靠灰阶 + 字号差，不堆 bold、不靠花色 * - 【红线】青蓝强调色只准出现在「主按钮 / 聚焦边框 / 进行中指示 / 极少量徽章」， * 总面积 <2%；禁止用于卡片背景、大色块、正文、阴影染色、铺底渐变 * - 青蓝是清新而克制的蓝（非 indigo、非荧光蓝、非灰扑扑钢蓝），冷静中带一丝生机 * - 阴影极柔、低透明、近中性，不发灰也不染色 * * 流程差异通过 `data-flow="..."` 微调（见下方 Flow-specific overrides）。 * ==========================================================================*/ /* ---------- 本地字体：Inter（英文）---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Inter-Bold.woff2') format('woff2'); } :root { /* ---------- 色板（L: lighter, D: darker；严禁直接用 hex）---------- */ /* 中性（UI 骨架）— 纯白底，中性灰阶（不发黄不发冷） */ --c-bg: #181818; /* 深色模式兜底（当前默认亮色，暂留） */ --c-surface: #ffffff; /* 纯白（不带冷调也不发黄） */ --c-surface-2: #f3f4f6; /* 页面/容器背景（拉开与 surface 差距，防强光层级消融） */ --c-surface-3: #eef0f2; /* 输入框/chip 背景 */ --c-surface-read: #fafaf9; /* 阅读区底色（极微暖白，缓解纯白眩光） */ --c-border: #e3e5e8; /* 描边（中性灰） */ --c-border-strong: #cdd0d4; --c-divider: #ebedef; /* 文字（中性近黑，克制；四档靠颜色差拉层级） */ --c-text: #1f2226; /* 主文字（中性近黑，非纯黑非冷青非暖褐） */ --c-text-muted: #5f646b; /* 次要说明/标签 */ --c-text-faint: #7f858e; /* 占位符/禁用（2026-07-05 自 #9398a0 提一档对比度： 实机截图确认 3:1 以下读不清，仍保持与 muted 的层级差） */ --c-text-invert: #ffffff; /* 强调（Primary）— 低饱和青蓝，【只用于交互元素，见顶部红线】 */ --c-accent: #2f9bbf; /* 主强调（青蓝/水青，提亮一档，冷静带清新） */ --c-accent-hover: #2682a3; /* hover 稍深 */ --c-accent-soft: #e8f4f8; /* 极淡青蓝底（聚焦/选中态，极小面积） */ --c-accent-contrast: #ffffff; /* 次要强调（Secondary）— 收敛为青蓝系柔和变体（保留变量名避免全站引用断裂） */ --c-cyan: #56adcd; /* 青蓝浅变体 */ --c-cyan-soft: #e8f4f8; /* 紫（Tertiary）：analyst 角色色 / 规避设计卡 / stage2 区分 / 动态消息。 原冷紫已废，收敛为青蓝同色相family，保持单一冷调。 收编原散落的 #7c3aed/#8b5cf6/#a78bfa/#5b21b6/#ede9fe 五个近似值 */ --c-violet: #3f8fab; /* 深青蓝（替代原冷紫） */ --c-violet-light: #8cc3d6; /* 渐变浅端 */ --c-violet-strong: #286b83; /* 深青蓝文字 */ --c-violet-soft: #e5f1f5; /* 浅青蓝底（tag/badge） */ /* 语义色（低饱和，不刺眼——专业工具不要消费级大红大绿） */ --c-success: #4f7d5a; /* 低饱和墨绿 */ --c-success-soft: #e8f0ea; --c-warning: #b5832f; /* 低饱和琥珀 */ --c-warning-soft: #f7efe0; --c-danger: #b54a3a; /* 暖红，不用纯红 */ --c-danger-soft: #f6e6e2; /* 风险等级专用（与 engineer/analyst 视图共用）*/ --c-risk-high: var(--c-danger); --c-risk-suspect: #c97b45; /* 疑似高（低饱和暖橙）*/ --c-risk-suspect-soft: #f7ece1; --c-risk-med: var(--c-warning); --c-risk-low: var(--c-success); /* ---------- 字体 ---------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.35; --lh-base: 1.55; --lh-loose: 1.75; /* ---------- 字间距 ---------- */ --ls-tight: -0.02em; --ls-wide: 0.02em; --ls-wider: 0.05em; /* ---------- 间距（4px 基线）---------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---------- 圆角 ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---------- 阴影（三档 + 品牌色）— 极柔、低透明、近中性，不发灰不染色 ---------- */ --shadow-1: 0 1px 2px rgba(31, 34, 38, .04), 0 1px 2px rgba(31, 34, 38, .02); --shadow-2: 0 2px 8px rgba(31, 34, 38, .06), 0 2px 4px rgba(31, 34, 38, .03); --shadow-3: 0 8px 24px rgba(31, 34, 38, .08), 0 4px 12px rgba(31, 34, 38, .04); --shadow-colored: 0 8px 32px -8px rgba(47, 155, 191, .16), 0 4px 12px -4px rgba(47, 155, 191, .08); --shadow-focus: 0 0 0 3px rgba(47, 155, 191, .20); /* ---------- 动效 ---------- */ --t-fast: 120ms; --t-base: 180ms; --t-slow: 260ms; --t-slower: 420ms; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* 强出场缓动：进场卡片、计数器 */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 轻弹性：按钮按压、磁吸抬升 */ /* ---------- Glow & Gradient（克制：柔和投影，青蓝同色相，非霓虹）---------- */ /* 青蓝色微光：只用在交互元素的悬停/焦点（凑近才察觉） */ --glow-accent: 0 2px 8px rgba(47, 155, 191, .15); --glow-accent-sm: 0 1px 4px rgba(47, 155, 191, .1); --glow-cyan: 0 2px 8px rgba(86, 173, 205, .15); --glow-success: 0 2px 8px rgba(79, 125, 90, .15); --glow-danger: 0 2px 8px rgba(181, 74, 58, .15); /* 主题渐变：仅剩 --grad-accent 一个活原语（主按钮/CTA 底，11 处消费）。 2026-07-05 清扫：--grad-accent-r / --grad-text / --grad-shimmer / --grad-ambient / --glass-*（玻璃材质三件套）随基调执行（去炫光/去渐变文字/背景拍平）后零消费，删除。 */ --grad-accent: linear-gradient(135deg, #3eaecf 0%, #2f9bbf 45%, #2682a3 100%); /* ---------- 层级 ---------- */ --z-header: 50; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* ---------- 布局 ---------- */ --container-max: 1240px; --sidebar-w: 260px; --header-h: 64px; --card-min-h: min(520px, 65vh); } /* 大屏：容器宽度随视口放大 */ @media (min-width: 1600px) { :root { --container-max: min(1600px, 88vw); } } @media (min-width: 2400px) { :root { --container-max: min(1800px, 80vw); } } /* 减少动效偏好：respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-slower: 0ms; } } /* ============================================================================ * Flow-specific overrides * ---------------------------------------------------------------------------- * FTO 化重塑后只保留 fto 一种路线（保留 data-flow 钩子便于将来扩展）。 * ==========================================================================*/ body[data-flow="fto"] { --c-accent: #2f9bbf; /* 青蓝（与 :root 一致，避免覆盖回旧色） */ --c-accent-hover: #2682a3; --c-accent-soft: #e8f4f8; } /* engineer vs analyst：身份不同则密度不同（analyst 更紧凑，信息密度高） * * Bug 1 (2026-05-15): 不要在 :root 级覆盖 --sp-6 / --fs-base —— 那会让 * .container 的横向 padding 和正文字号在切身份时整体跳变，hub 卡片会 * 明显左右"漂"一下。改成在具体元素上做局部紧凑（见 skin.css 末尾）。 */