/* ============================================================================ * modcheck 官网 · Design Tokens * ---------------------------------------------------------------------------- * 逐字落地 DESIGN_SPEC.md §1（颜色）/ §2（字体）/ §3（间距·布局）。 * * ★★ 本文件是**全站唯一的颜色字面量来源** ★★ * 除本文件外，任何 CSS 中出现 #hex / rgb() / rgba() / hsl() 一律视为违规。 * 其它文件只能通过 var(--...) 间接引用。 * * 命名约定： * --c-* 颜色（color） * --s-* 六态语义色（state） * --f-* 字体族（font-family） * --fs-* 字号（font-size） * --sp-* 间距（space） * --w-* 宽度容器（width） * --r-* 圆角（radius） * --sh-* 阴影（shadow） * --t-* 过渡时长与缓动（transition） * --z-* 层叠层级（z-index） * --h-* 固定高度（height） * ==========================================================================*/ :root { /* ── §1 表面色阶：从最底到最高 ───────────────────────────────────── 分层不靠阴影，靠这五级表面 + --c-line 的 1px 描边。 */ --c-bg: #0a0b0d; --c-bg-soft: #0e0f12; --c-surface: #131519; --c-surface-2: #191c21; --c-line: #23272e; /* 1px 描边，全站唯一分割手段 */ --c-line-soft: #1b1e23; /* ── §1 文字色阶：从最亮到最暗 ───────────────────────────────────── 对比度（对 --c-bg）：--c-text ≥ 12:1，--c-text-2 ≥ 7:1，--c-text-3 ≥ 4.5:1 */ --c-text: #e9ecf1; --c-text-2: #a2a9b6; /* --c-text-3 必须能在最亮的底色 --c-surface-2(#191c21) 上达到 4.5:1。 旧值 #6e7683 在 surface-2 上只有 3.73:1，在 surface 上 3.99:1 —— 全都不达 AA， 而它承载的是 13–15px 的小字（页脚栏目标题、卡片 meta、表单标签）。 #7d8593 实测：bg 5.30 / bg-soft 5.15 / surface 4.92 / surface-2 4.59。 */ --c-text-3: #7d8593; /* --c-text-4 用于代码块注释之类的弱化文字，但那是**说明性内容**不是装饰， 仍须达到正文 4.5:1。旧值 #464c56 在 surface 上只有 2.11:1。 #8a9099 实测：bg 6.12 / bg-soft 5.96 / surface 5.68 / surface-2 5.31。 */ --c-text-4: #8a9099; /* ── §1 强调色（沿用产品 GUI 的蓝，做深底适配） ──────────────────── */ --c-accent: #3b82f6; --c-accent-hi: #60a5fa; --c-accent-lo: #2563eb; /* 实底按钮用色：白字对比度 5.2:1（--c-accent 只有 3.7:1，不做文字底） */ --c-accent-deep: #1d4ed8; /* 实底按钮 hover/active 加深：白字对比度 6.6:1 */ --c-on-accent: #ffffff; /* 强调色实底之上的文字 */ --c-accent-dim: rgba(59,130,246,.12); --c-accent-line: rgba(59,130,246,.35); /* hero 背景光晕：全站唯一允许的渐变，透明度 ≤ .10（SPEC §0） */ --c-glow: rgba(59,130,246,.10); --c-glow-fade: rgba(59,130,246,0); /* ── §1 六态语义色 —— 必须与产品 README 的六态严格对应 ───────────── ready 就绪 / notice 需注意 / prerelease 仅存测试版 / blocked 阻塞 / unknown 未判定 / ignored 已忽略 注意：色相只是辅助。形状（§4）与文字标签才是主要表意手段。 */ --s-ready: #34d399; --s-notice: #fbbf24; --s-prerelease: #fb923c; --s-blocked: #f87171; --s-unknown: #94a3b8; /* 已忽略是"短横"形状的非文字指示物，适用 WCAG 1.4.11 的 3:1（而非正文 4.5:1）。 旧值 #4b5563 在 surface 上只有 2.42:1，短横几乎看不见。 #5f6a7a 实测：bg 3.59 / bg-soft 3.49 / surface 3.33 / surface-2 3.11（最坏面也过 3:1）。 */ --s-ignored: #5f6a7a; /* ── §1 语义别名 ─────────────────────────────────────────────────── */ --c-ok: var(--s-ready); --c-warn: var(--s-blocked); --c-focus: var(--c-accent-hi); /* ── §1 派生的半透明表面（由上面色阶派生，集中在此以便统一调整） ── 供 .site-header 的 blur 底色、遮罩等使用。 */ --c-scrim: rgba(10,11,13,.72); --c-scrim-solid:rgba(10,11,13,.92); --c-veil: rgba(0,0,0,.55); /* ── §2 字体族：不加载任何 webfont，只用系统栈 ───────────────────── */ --f-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; --f-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; /* ── §2 字号 ─────────────────────────────────────────────────────── */ --fs-h1: clamp(2.4rem, 1.4rem + 4.2vw, 4rem); --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); --fs-h3: clamp(1.2rem, 1.02rem + 0.8vw, 1.5rem); --fs-body: 1rem; --fs-lead: 1.0625rem; /* 强调段 17px */ --fs-lg: 1.125rem; /* 强调段 18px */ --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; /* ── §2 排版常量：字重 / 行高 / 字距 ─────────────────────────────── */ --lh-body: 1.7; --lh-lead: 1.75; --lh-tight: 1.15; --lh-heading: 1.2; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-heading: 640; /* 大标题专用（变量字体下的中间字重） */ --fw-bold: 700; --ls-heading: -0.022em; /* 仅用于大字号 */ --ls-heading-cn: -0.01em; /* 中文大标题 */ --ls-label: 0.08em; /* 小标签 / eyebrow */ --ls-wordmark: -0.01em; /* 页头 / 页脚字标 */ --ls-none: 0; /* ── §3 间距标尺 ─────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-2-5:10px; /* 半档：密集表格行 / 紧凑列表 */ --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ── §3 宽度容器 ─────────────────────────────────────────────────── */ --w-content: 1140px; /* 常规内容列 */ --w-wide: 1320px; /* 表格 / 演示区 */ --w-text: 680px; /* 纯长文阅读列 */ /* ── §3 圆角 ─────────────────────────────────────────────────────── */ --r-xs: 2px; /* .dot--blocked 方块圆角 */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* ── §3 阴影 ─────────────────────────────────────────────────────── */ --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.45); --sh-3: 0 16px 48px rgba(0,0,0,.55); --sh-glow: 0 0 0 1px var(--c-accent-line), 0 8px 32px rgba(59,130,246,.18); /* ── §3 过渡 ─────────────────────────────────────────────────────── */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t-base: 220ms cubic-bezier(.4,0,.2,1); --t-slow: 420ms cubic-bezier(.22,1,.36,1); /* ── §3 层叠层级 ─────────────────────────────────────────────────── */ --z-header: 100; --z-drawer: 200; --z-toast: 300; /* ── §3 固定尺寸 ─────────────────────────────────────────────────── */ --h-header: 64px; /* ── 派生：描边宽度与状态圆点尺寸（供 §4 形状规则统一引用） ──────── */ --bd-1: 1px; --bd-2: 2px; /* 激活指示条 / 进度条 */ --bd-3: 3px; /* 结论横幅左侧竖色条 */ --bd-ring: 1.5px; /* .dot--unknown 空心环 */ --dot-size: 10px; /* .dot 基准边长 */ --dot-bar-w: 8px; /* .dot--ignored 短横线宽 */ --dot-bar-h: 2px; /* .dot--ignored 短横线高 */ /* ── 派生：可读性辅助 ────────────────────────────────────────────── */ --tap-min: 40px; /* 最小点击目标（无障碍硬性要求） */ /* ── 打印专用：深色站点打印时必须反相，否则整页黑底浪费墨 ───────── 仍然只在本文件出现颜色字面量。 */ --c-print-bg: #ffffff; --c-print-text: #111111; --c-print-mute: #555555; --c-print-line: #cccccc; }