/* ========================================================================== 见微 AlgoLens · 新版界面设计令牌 设计方向：工业实用 × 双色印刷（墨黑 + 朱砂） --------------------------------------------------------------------------- 全部颜色写成变量，组件内禁止硬编码色值。 暗色主题通过 [data-theme="dark"] 覆盖语义令牌，组件代码一行不动。 ========================================================================== */ :root { /* ---------- 纸：暖调近白 ---------- 刻意避开纯白 #fff。纯白刺眼，且在长时间阅读算法代码时更容易疲劳。 暖调纸白接近印刷品，也拉开了与「AI 生成白底」的距离。 */ --paper: #F2EFE8; --paper-raised: #FBFAF5; /* 卡片、浮起的面板 */ --paper-sunk: #E7E2D6; /* 凹陷区、代码底、表头 */ --paper-deep: #DCD6C7; /* 更深一档，用于画布舞台 */ /* ---------- 墨：暖调近黑 ---------- 同样不用纯黑。纯黑在纸白上会产生刺眼的硬对比，暖黑更接近油墨。 */ --ink: #16150F; /* 主文字 / 粗黑线 */ --ink-2: #3A382F; /* 次级文字（纸底 10.2:1，压色块底也够用） */ --ink-3: #6E6A5E; /* 辅助文字（纸底 4.71:1，正文可用） */ --ink-4: #8E8878; /* 占位 / 禁用（纸底 3.08:1，仅非关键信息） */ /* ---------- 线：双线系统 ---------- 发丝线做分隔，粗黑线做结构。这是工业风的骨架，靠线而不是靠阴影分层。 */ --rule: #CFC9BB; /* 发丝线 */ --rule-2: #B5AE9C; /* 稍重的发丝线 */ --rule-hard: var(--ink); /* 粗黑结构线 */ /* ---------- 朱砂：唯一强调色 ---------- 单页只此一个强调色，只用于关键动作与当前状态。 按「色块版 / 文字版」拆分 —— 同一个色相在浅底上当小字时对比度会掉， 所以小字单独用更暗的一档，不靠调低不透明度硬凑。 */ --cinnabar: #C8321A; /* 色块版：填充、描边、大字（纸底 4.66:1） */ --cinnabar-text: #A8280F; /* 文字版：浅底上的小字（纸底 6.15:1，浅朱砂底 5.75:1） */ --cinnabar-on-ink: #FF7A55; /* 放在 --ink 表面上时的朱砂（浅色主题下 7.11:1） */ --cinnabar-deep: #98230F; --cinnabar-tint: #F7E4DE; /* 极浅底，用于选中行 */ --cinnabar-ink: #7A1C0B; /* 朱砂底上的深色文字 */ /* ---------- 实心块上的文字色 ---------- --s-cur / --s-done 是实心填充，其上的文字必须用「纸色」。 浅色主题下纸色是浅的、深色主题下纸色是深的，两种主题都自动正确。 */ --on-solid: var(--paper); /* ---------- 状态语义（非算法状态，是界面状态） ---------- */ --ok: #1F6B3A; /* 通过 */ --warn: #8A5A00; /* 警告 */ --fail: #A32A16; /* 失败（与朱砂同族，避免引入第三种色相） */ /* ---------- 算法状态：双色编码 ---------- 7 种状态，只用墨黑 + 朱砂 + 纸色，靠「填充方式」区分而非色相。 每一项都必须同时有形状/纹理特征 —— 灰度打印出来也能分清。 命名分两套，指向同一批值： --s-cur / --s-cmp / --s-cand 新方案的短名 --s-active / --s-compare / --s-frontier 渲染器正在用的名字（保留兼容） 加状态或改配色只需要动这里一处。 */ --s-idle: var(--paper-raised); /* 未处理：纸底 + 发丝描边 */ --s-idle-ed: var(--rule-2); --s-cur: var(--cinnabar); /* 当前：朱砂实心（全场唯一带硬阴影的） */ --s-active: var(--cinnabar); --s-active-ed: var(--ink); --s-cmp: transparent; /* 比较：透明底 + 朱砂虚线描边 */ --s-compare: transparent; --s-compare-ed: var(--cinnabar); --s-done: var(--ink); /* 已确定：墨黑实心，数字反白 */ --s-done-ed: var(--ink); --s-cand: var(--cinnabar-tint); /* 候选：朱砂 45° 斜纹 */ --s-frontier: url(#hz); /* 纹理定义在 SVG 的 里，故此处是引用 */ --s-frontier-ed: var(--cinnabar); --s-skip: #D8D3C6; /* 已排除：灰点阵 */ --s-pruned: url(#dt); --s-pruned-ed: var(--rule-2); --s-path: var(--ink); /* 答案路径：墨黑实心 + 朱砂外环 */ --s-path-ed: var(--cinnabar); /* ---------- 图例色块 ---------- 图例是 HTML，拿不到 SVG 里的纹理，所以在这里用 CSS 复刻同一套 斜纹与点阵，保证图例和画布里的样子一致。 */ --hatch-cin: repeating-linear-gradient(45deg, var(--cinnabar) 0 3px, transparent 3px 8px); --dots-skip: radial-gradient(var(--ink-4) 1px, transparent 1px); --dots-size: 5px 5px; /* ---------- 字体 ---------- */ --font-display: 'Archivo Black', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Noto Sans Mono CJK SC', 'Courier New', monospace; --font-body: 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif; /* ---------- 字阶（模块化，禁止临时手写数值） ---------- */ --t-mega: clamp(3.25rem, 10vw, 8rem); /* 首屏巨字 / 章节编号 */ --t-xxl: clamp(2rem, 4.6vw, 3.5rem); --t-xl: clamp(1.5rem, 2.6vw, 2.25rem); --t-lg: 1.375rem; --t-md: 1.125rem; --t-base: 0.9375rem; /* 15px —— 中文正文基准 */ --t-sm: 0.8125rem; --t-xs: 0.6875rem; /* 11px —— 标签、编号 */ --t-2xs: 0.625rem; /* 10px —— 极小的元信息，仅等宽字使用 */ /* 中文行高不得低于 1.7 */ --lh-tight: 1.02; /* 超大标题 */ --lh-snug: 1.35; --lh-body: 1.75; /* 正文 */ --lh-code: 1.72; --ls-mega: -0.035em; /* 巨字收紧字距 */ --ls-tight: -0.02em; --ls-wide: 0.14em; /* 标签拉开，全大写 */ /* ---------- 间距（4 基准） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px; /* ---------- 圆角：工业风刻意保持接近直角 ---------- */ --r-0: 0; --r-1: 2px; --r-2: 3px; /* ---------- 阴影：硬阴影（无模糊的偏移实色） ---------- 印刷错版感，是这个方案最容易被记住的视觉签名之一。 柔和投影一概不用。 */ --sh-1: 3px 3px 0 var(--ink); --sh-2: 6px 6px 0 var(--ink); --sh-cinnabar: 3px 3px 0 var(--cinnabar); /* ---------- 描边宽度 ---------- */ --bw-hair: 1px; --bw-1: 2px; --bw-2: 3px; --bw-3: 5px; /* ---------- 动效 ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms; /* ---------- 氛围层参数 ---------- */ --grid-size: 24px; --grid-line: rgba(22, 21, 15, 0.045); /* ---------- 布局 ---------- */ /* 顶栏实际高度，由 site.js 测量后写入。这里给个兜底， 供 sticky 元素在 JS 生效前定位使用。 */ --masthead-h: 64px; --wrap: 1440px; --pad-x: clamp(20px, 4vw, 64px); } /* ========================================================================== 暗色主题「夜读」 主动选择的暗色方案：把纸与墨整体反转，朱砂提亮以保住对比度。 ========================================================================== */ [data-theme="dark"] { --paper: #14130F; --paper-raised: #1D1B15; --paper-sunk: #100F0B; --paper-deep: #0B0A07; --ink: #F2EFE8; --ink-2: #D5D0C4; --ink-3: #A6A093; /* 深底上 7.14:1 */ --ink-4: #6E6A5E; --rule: #34312A; --rule-2: #474336; --rule-hard: #F2EFE8; --cinnabar: #FF6A45; /* 提亮以适配深底（深纸底 6.55:1） */ --cinnabar-text: #FF8B6B; --cinnabar-on-ink: #A8280F; --cinnabar-deep: #FF8B6B; --cinnabar-tint: #3A1A12; --cinnabar-ink: #FFD9CE; --ok: #6FCF97; --warn: #E5B567; --fail: #FF8B6B; --s-idle: var(--paper-raised); --s-skip: #2A2721; --grid-line: rgba(242, 239, 232, 0.05); --sh-1: 3px 3px 0 #F2EFE8; --sh-2: 6px 6px 0 #F2EFE8; --sh-cinnabar: 3px 3px 0 var(--cinnabar); }