/* ============================================================ 未来创力 FUTURE CREATIVE · 设计令牌（v1.6） 海盐蓝 A：品牌蓝 × 中性阅读面 ------------------------------------------------------------ v1.6（2026-07-26）变更（组件库 v2.6 卡片系统规范化）： - 圆角补全为四档嵌套阶梯：--fc-radius 18（E2 标准卡）→ 新增 --fc-radius-md 14（E1 嵌套卡/E3 浮层）→ --fc-radius-sm 12 （E0 面板）→ 新增 --fc-radius-xs 10（代码/输入块）； 圆角嵌套律 = 每嵌套一层降一档，禁同档嵌套； - 海拔纪律：边框与投影由海拔决定（E0 无框无影 / E1 1px 无影 / E2 1.5px + shadow-card / E3-E4 shadow-md，E4 另加 ink 45% 遮罩）； 投影不叠投影，嵌套层一律无影。细则与实样见组件库 §08。 ------------------------------------------------------------ v1.5（2026-07-26）变更（组件库 v2.5 字体系统规范化）： - 新增字阶 --fc-fs-*（12 级，命名=角色，锚定既有定稿值不造新数： micro10.5 / tag11.5 / note12.5 / aux13.5 / ui14.5 / body15 / read16 / sub17.5 / title20 / k1-22 / display30 / num34）； 整数 11–14px 为历史遗留，新代码禁用，存量迭代时向相邻半档收敛； - 新增行高档 --fc-lh-*（tight1.35 标题 / ui1.5 控件 / read1.8 界面阅读 / article1.9 题面）与字距档 --fc-ls-*（tag .09em / eyebrow .2em，仅限 ≤11.5px 眉标场景）； - 规则：数据列/倒计时/榜单的 mono 数字必开 font-variant-numeric: tabular-nums；字重四档 400/600/700/800、禁 500（中文小字发虚）； serif 仅品牌名/display/印章体。细则与实样见组件库 §02。 ------------------------------------------------------------ v1.4（2026-07-26）变更（难度色阶参考洛谷）： - 难度从站内五级改为洛谷八档 --fc-d0 ~ --fc-d7（暂无评定 / 入门 / 普及− / 普及/提高− / 普及+/提高 / 提高+/省选− / 省选/NOI− / NOI/NOI+/CTSC），base 采用洛谷原色（灰红橙黄绿蓝紫墨蓝）作为 师生已有认知锚点，deep/soft 按本系统纪律派生（deep 压白与压 soft 全档实测 ≥4.5:1 ✅，数值见难度区注释）。 - 破坏性变更：旧五级 d1~d5（入门→挑战）语义作废，d1~d5 重映射为 洛谷前五档；使用旧五级的归档 demo（record-detail 系列）色义漂移， 属预期。兼容别名 --d0 ~ --d7 同步。 - 冲突管理：入门红/普及+绿 与 WA/AC 语义色撞色系——洛谷惯例优先 （受众先验强于站内纪律），但两套语法隔离：难度只以「彩字/药丸/ 分布条」出现在难度语境，评测只以「全大写 mono 徽章」出现在结果 语境，同一视图不并排混用。 - 灰/橙/黄/绿 base 原色压白 <3:1（洛谷固有），base 仅用于有邻接 对比的标记（分布条压 track、soft 底上的圆点），文字一律 deep。 ------------------------------------------------------------ v1.3（2026-07-26）变更（组件库 v2.0 配套）： - 新增热力图色阶 --fc-heat-1..4（success 20/45/70/100% 混白）， 空格复用 --fc-track。格子为装饰性展示，数值经 tooltip / aria-label 提供，不受文字 AA 约束； - 新增榜单奖牌三色组 --fc-medal-{1,2,3}（base/-deep/-soft）： 金 base/soft 复用琥珀组、deep 用专用 #8a5800（amber-800 压 amber-50 仅 4.2:1 不达标）；银 #9aa3b8、铜 #c9834f 为新色。 数字一律 deep 压 soft（金 5.6:1、银 6.6:1、铜 5.8:1 ✅）， 圆环用 base。 ------------------------------------------------------------ v1.2（2026-07-26）变更（难度色阶重设计）： - 进阶 d4 弃用 warning 泥棕（#8f5b00 文字发闷），改专用「难度橙」 #ef7d1a / deep #a8470f / soft #fff0e1（deep 白底 5.9:1、soft 底 5.3:1 ✅）； - 挑战 d5 与 WA 错误红脱钩，改专用「挑战绯红」 #e14d5a / deep #a02341 / soft #ffe9ec（deep 白底 7.5:1、soft 底 6.5:1 ✅）； - 中等 d3 文字色加深一档（primary-600 → 700），避免与题号/链接同色； - 整体阶梯呼应竞赛文化色感（CF：绿 → 蓝 → 紫 → 橙 → 红）。 ------------------------------------------------------------ v1.1（2026-07-26）变更： - 中性线色改冷灰：--fc-line rgb(217, 221, 226) → rgb(217, 221, 226)、--fc-line-strong rgb(133, 139, 148) → rgb(133, 139, 148)，与冷调页面底/卡片阴影统一；2026-07-19 之后 的定稿页（题目详情 / 题库列表 / 题面页）均已按冷灰执行。 - 新增「难度五级」色阶 --fc-d1 ~ --fc-d5（入门→挑战），全部映射 现有功能色组与主色，禁止另造色相；文字一律用 deep（白底 AA）。 - 新增字体令牌 --fc-font-sans / --fc-font-mono / --fc-font-serif。 - 新增微令牌 --fc-thead（表头底）/ --fc-track（进度条轨道底）。 - 为现有预览文件提供兼容别名 --d1 ~ --d5（正式移植请用 --fc-d*）。 ------------------------------------------------------------ 用法： - 宣传页 / OJ 产品 / 后续暗色模式，全部只引用本文件变量； - 主色避开绿/红/黄，与评测语义色（AC/WA/TLE）保持隔离； - 强调色（琥珀）仅用于营销场景：高亮、徽章、CTA 点缀； - 难度色只用于「难度」语义（列表难度列、难度药丸、分布条）， 不得挪作他用，避免与评测徽章混淆（评测徽章走 verdict 组）； - 移植到 Hydro 时：.styl 中以此为准逐一替换硬编码色值。 ============================================================ */ :root { /* ---------- 主色阶 Primary（紫罗兰） ---------- */ --fc-primary-50: #efedfc; --fc-primary-100: #e1ddf9; --fc-primary-200: #c6c0f3; --fc-primary-300: #a79eeb; --fc-primary-400: #7f76e0; --fc-primary-500: rgb(9, 63, 130); /* 主色：按钮、链接、品牌标识 */ --fc-primary-600: rgb(9, 63, 130); /* 悬停/按下 */ --fc-primary-700: #3c3899; --fc-primary-800: rgb(4, 44, 96); --fc-primary-900: #232054; /* ---------- 强调色 Accent（琥珀，仅营销场景） ---------- */ --fc-amber-50: #fff6e0; --fc-amber-100: #ffe9b3; --fc-amber-200: #ffd766; /* 标记笔高亮 */ --fc-amber-400: #ffb020; /* 强调主色 */ --fc-amber-600: #d98a00; /* 深底上的琥珀文字 */ --fc-amber-800: #a66a00; /* ---------- 功能色 Semantic（全站统一，不随主色变） ---------- base = 图标/圆点/边框/进度条（不作文字色） deep = 文字/徽章字/实心按钮底（WCAG AA 实测达标） soft = 底色 */ --fc-success: #1fae7d; --fc-success-deep: #0f7a56; --fc-success-soft: #e1f6ed; --fc-warning: #d98a00; --fc-warning-deep: #8f5b00; --fc-warning-soft: #fff3d8; --fc-error: #f26060; --fc-error-deep: #b23030; --fc-error-soft: #ffeaea; --fc-info: #2ea8e6; --fc-info-deep: #0e6d9e; --fc-info-soft: #e3f3fc; /* ---------- 评测状态 Verdict（映射功能色，禁止另造） ---------- */ --fc-ac: var(--fc-success); --fc-ac-deep: var(--fc-success-deep); --fc-ac-soft: var(--fc-success-soft); --fc-wa: var(--fc-error); --fc-wa-deep: var(--fc-error-deep); --fc-wa-soft: var(--fc-error-soft); --fc-tle: var(--fc-warning); --fc-tle-deep: var(--fc-warning-deep); --fc-tle-soft: var(--fc-warning-soft); --fc-ce: rgb(105, 110, 118); --fc-ce-deep: rgb(84, 91, 101); --fc-ce-soft: rgb(237, 240, 244); /* ---------- 难度八档 Difficulty（v1.4 参考洛谷） ---------- d0 暂无评定 灰 / d1 入门 红 / d2 普及− 橙 / d3 普及/提高− 黄 / d4 普及+/提高 绿 / d5 提高+/省选− 蓝 / d6 省选/NOI− 紫 / d7 NOI/NOI+/CTSC 墨蓝。base = 洛谷原色（认知锚点，仅做有邻接 对比的标记）；文字一律 deep；药丸 = deep 字 + soft 底。 deep 实测（白底 / soft 底）：d0 6.0/5.3、d1 6.0/5.2、d2 5.6/5.0、 d3 6.0/5.5、d4 5.4/4.8、d5 6.0/5.2、d6 7.6/6.5、d7 15.0/12.5 ✅ */ --fc-d0: #bfbfbf; --fc-d0-deep: #5d6373; --fc-d0-soft: #f0f1f6; --fc-d1: #fe4c61; --fc-d1-deep: #c01e37; --fc-d1-soft: #ffe9ec; --fc-d2: #f39c11; --fc-d2-deep: #9d5504; --fc-d2-soft: #fdefdc; --fc-d3: #ffc116; --fc-d3-deep: #7f5e00; --fc-d3-soft: #fff5d6; --fc-d4: #52c41a; --fc-d4-deep: #2f7a10; --fc-d4-soft: #e9f7e0; --fc-d5: #3498db; --fc-d5-deep: #1c689c; --fc-d5-soft: #e4f0fa; --fc-d6: #9d3dcf; --fc-d6-deep: #7c2ca6; --fc-d6-soft: #f5eafb; --fc-d7: #0e1d69; --fc-d7-deep: #0e1d69; --fc-d7-soft: #e8eaf6; /* 预览文件兼容别名（problem-list / statement-layout 系列使用； ⚠ v1.4 起 d1~d5 已重映射为洛谷前五档，旧五级语义作废） */ --d0: var(--fc-d0); --d0-deep: var(--fc-d0-deep); --d0-soft: var(--fc-d0-soft); --d1: var(--fc-d1); --d1-deep: var(--fc-d1-deep); --d1-soft: var(--fc-d1-soft); --d2: var(--fc-d2); --d2-deep: var(--fc-d2-deep); --d2-soft: var(--fc-d2-soft); --d3: var(--fc-d3); --d3-deep: var(--fc-d3-deep); --d3-soft: var(--fc-d3-soft); --d4: var(--fc-d4); --d4-deep: var(--fc-d4-deep); --d4-soft: var(--fc-d4-soft); --d5: var(--fc-d5); --d5-deep: var(--fc-d5-deep); --d5-soft: var(--fc-d5-soft); --d6: var(--fc-d6); --d6-deep: var(--fc-d6-deep); --d6-soft: var(--fc-d6-soft); --d7: var(--fc-d7); --d7-deep: var(--fc-d7-deep); --d7-soft: var(--fc-d7-soft); /* ---------- 字阶 Type scale（v1.5 · 命名=角色；用法细则见组件库 §02） ---------- */ --fc-fs-micro: 10.5px; /* mono 微徽章（verdict 药丸） */ --fc-fs-tag: 11.5px; /* 眉标/表头（配 --fc-ls-tag 加宽 + 800） */ --fc-fs-note: 12.5px; /* 注记/辅助说明（muted 起步） */ --fc-fs-aux: 13.5px; /* 次要说明/紧凑控件 */ --fc-fs-ui: 14.5px; /* 控件/列表行正文 */ --fc-fs-body: 15px; /* 界面正文 = 阅读下限 */ --fc-fs-read: 16px; /* 题面正文（行高 --fc-lh-article） */ --fc-fs-sub: 17.5px; /* K2 章节/子标题 */ --fc-fs-title: 20px; /* 卡片节标题 */ --fc-fs-k1: 22px; /* K1 开题/页面 H1 */ --fc-fs-display: 30px; /* 页面大标题（serif 品牌位） */ --fc-fs-num: 34px; /* 大数字（总分/统计，mono + tabular-nums） */ --fc-lh-tight: 1.35; /* 标题 */ --fc-lh-ui: 1.5; /* 控件/表格 */ --fc-lh-read: 1.8; /* 界面阅读 */ --fc-lh-article: 1.9; /* 题面长文 */ --fc-ls-tag: .09em; /* 表头/小标签加宽（仅 ≤11.5px） */ --fc-ls-eyebrow: .2em; /* 眉标加宽（仅 mono 全大写） */ /* ---------- 热力图 Heatmap（v1.3 · 成长档案打卡，success 派生） ---------- 空格用 --fc-track；hover 提示给具体次数（tooltip / aria-label） */ --fc-heat-1: #d2efe5; --fc-heat-2: #9adac5; --fc-heat-3: #62c6a4; --fc-heat-4: var(--fc-success); /* ---------- 奖牌 Medal（v1.3 · 榜单 1/2/3 名） ---------- 数字 = deep 压 soft；圆环 = base；4 名以后纯等宽数字不着色 */ --fc-medal-1: var(--fc-amber-400); --fc-medal-1-deep: #8a5800; --fc-medal-1-soft: var(--fc-amber-50); --fc-medal-2: #9aa3b8; --fc-medal-2-deep: #4d5566; --fc-medal-2-soft: #f0f2f7; --fc-medal-3: #c9834f; --fc-medal-3-deep: #8a4c26; --fc-medal-3-soft: #f9ede2; /* ---------- 中性色 Neutral（冷调浅灰，v1.1 线色冷灰化） ---------- */ --fc-bg: rgb(246, 248, 250); /* 页面底 */ --fc-surface: #ffffff; /* 卡片 */ --fc-line: rgb(217, 221, 226); /* 常规边框（v1.1：原 rgb(217, 221, 226)） */ --fc-line-strong: rgb(133, 139, 148); /* 强调边框（v1.1：原 rgb(133, 139, 148)） */ --fc-thead: #fafafd; /* 表头底（v1.1 新增） */ --fc-track: #eef0f6; /* 进度条/分布条轨道底（v1.1 新增） */ --fc-text-faint: rgb(105, 110, 118); /* 弱文字（仅装饰/图标/占位，禁止承载信息） */ --fc-text-muted: rgb(84, 91, 101); /* 次文字（正文描述） */ --fc-ink: rgb(27, 35, 46); /* 主文字（标题/正文） */ --fc-text-body: rgb(46, 54, 65); /* 题面正文（长阅读，介于 ink 与 muted；白底 10.9:1，v2.1 移植收编） */ /* ---------- 语义别名（日常开发优先用这组） ---------- */ --fc-primary: var(--fc-primary-500); --fc-primary-deep: var(--fc-primary-600); --fc-primary-soft: var(--fc-primary-50); --fc-accent: var(--fc-amber-400); --fc-accent-soft: var(--fc-amber-50); --fc-mark: var(--fc-amber-200); /* ---------- 字体（v1.1 新增） ---------- */ --fc-font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif; --fc-font-mono: Consolas, "JetBrains Mono", "SF Mono", Monaco, "Courier New", monospace; --fc-font-serif: "LXGW WenKai", "Kaiti SC", "KaiTi", serif; /* 品牌衬线：品牌名/页面大标题 */ /* ---------- 配套圆角与阴影 ---------- */ --fc-radius: 18px; /* E2 标准卡 */ --fc-radius-md: 14px; /* E1 嵌套卡 / E3 浮层(v1.6) */ --fc-radius-sm: 12px; /* E0 面板 / callout */ --fc-radius-xs: 10px; /* 代码块 / 输入块(v1.6) */ --fc-shadow-sm: 0 4px 14px rgba(27, 30, 48, .06); --fc-shadow-md: 0 16px 40px rgba(27, 30, 48, .10); --fc-shadow-card: 0 14px 34px rgba(35, 32, 84, .08); /* 定稿页卡片实际投影（v1.1 收编） */ --fc-shadow-primary: 0 10px 24px rgba(91, 84, 214, .32); }