/* ========================================================================== 理嘉 · 设计 token -------------------------------------------------------------------------- 唯一事实来源：.workbuddy/design/visual-direction.md v1.5.9（冲突时以 handoff/DECISIONS.md 为准） 对应章节：§2.9（色彩变量块）· §3.4（字族栈）· §4.1–4.3（字号） §5.1（间距）· §5.2（容器）· §5.3（圆角）· §5.4（阴影/焦点环） §5.5（动效）· §6.3（导航高度）· 信息架构 §1.3（锚点偏移） 硬规则： 1. 本文件**只放变量**，不夹带任何组件样式、不写选择器逻辑。 2. 变量前缀一律 --lj-，不得出现第二个色值来源。 3. 任何组件层不得自行拼 box-shadow，只能引用本文件的**四个**阴影变量： --lj-shadow-focus / --lj-shadow-focus-on-dark（焦点环两套，按底色切换） --lj-shadow-overlay（浮层）/ --lj-shadow-nav（吸顶导航滚动后）。 ========================================================================== */ /* cascade layers 声明必须在最前。顺序即优先级：后者覆盖前者。 reset < tokens < base < layout < components < utilities */ @layer reset, tokens, base, layout, components, utilities; @layer tokens { :root { /* ── surface｜视觉规范 §2.2 ───────────────────────────────────────── */ --lj-canvas: #faf9f5; /* 默认页面底色 */ --lj-surface: #f0eee6; /* 卡片、次级 band */ --lj-surface-hover: #e8e6dc; /* 卡片 hover、按钮 disabled 底 */ --lj-surface-warm: #e3dacc; /* 暖麦 band、重点卡片、on-dark 按钮 hover */ --lj-surface-warm-hover: #dbd1bf; /* card-warm 的 hover 值｜§6.2 给出，§2.9 变量块漏收，此处补入以满足「不得有第二个色值来源」。该底色上次级文字只能是 #5e5d59｜§2.2 */ --lj-surface-kraft: #d4a27f; /* 最高饱和暖纸，仅小面积标签，**不可承载文字** */ --lj-surface-black: #000000; /* 全出血深色 block 底（类型 4 / 类型 10 专用） */ --lj-surface-dark: #141413; /* 页脚底、深色区内的卡片 */ /* ── text｜视觉规范 §2.2 ─────────────────────────────────────────── */ --lj-ink: #141413; /* 主文字、实心 CTA、主边框（canvas 上 17.5:1） */ --lj-ink-soft: #3d3d3a; /* 主按钮 hover、深色区边框（canvas 上 11.6:1） */ --lj-text-secondary: #5e5d59; /* 次级正文、说明、链接 hover（canvas 上 6.3:1 ✓AA） */ --lj-text-tertiary: #87867f; /* 元数据、禁用说明（canvas 上 3.47:1；**禁止在 surface-warm 上用**） */ --lj-text-on-dark: #b0aea5; /* 深色区次要文字（#141413 上 8.3:1）——**只允许出现在深色底上** */ --lj-canvas-on-dark: #faf9f5; /* 深色区主文字（#141413 上 17.5:1） */ /* ── border｜视觉规范 §2.3 ───────────────────────────────────────── */ --lj-border-subtle: #e6e3d8; /* 卡片 1px 描边、表格行线 */ --lj-border-hairline: #d1cfc5; /* 常规细分隔线、输入框边框、描边按钮 */ --lj-border-strong: #141413; /* 描边按钮、选中态 */ --lj-border-on-dark: #3d3d3a; /* 深色区块内部边框 */ /* ── accent：Clay 原值｜视觉规范 §2.9 v1.5.4 + DECISIONS V7 ──────── * **只有两个变量，没有第三档。** `--lj-accent-hover` / `--lj-accent-solid` / `--lj-accent-deep` 三个派生值已全部删除（§2 被推翻清单），不得新增。 使用边界：浅底上只能「铺」和「画」，不能「写」；深底上可作文字色。 全站唯一合法的 Clay 文字位置 = 页尾 CTA 标题里的 1 个关键词。 图形级落点 0–2 处，合计 ≤3 处，且不同屏相邻。 */ --lj-accent: #d97757; /* 装饰色：色块、装饰线、竖线、图标描边；深色底上可作文字色 */ --lj-accent-tint: #f4ddd2; /* 淡填充底、标签底、序号衬底、::selection */ /* ── 功能色【新增】｜视觉规范 §2.9 ───────────────────────────────── */ --lj-danger: #b03a28; --lj-danger-text: #8c2c1c; --lj-danger-tint: #f7e3dd; --lj-success: #4e6034; --lj-success-tint: #e5e8d9; /* ── 焦点：两套值，按所在区块底色切换｜视觉规范 §5.4 ─────────────── * 切换依据是元素**最近祖先区块的底色**，不是元素自身填充色。 深色区（#000000 / #141413）内的所有 focusable 元素必须用 on-dark 版； 浅色版外环 #141413 在深色底上是 1:1，等于没有焦点提示。 */ --lj-focus: #141413; --lj-focus-on-dark: #faf9f5; /* ── 阴影：全站只允许这 4 个值｜视觉规范 §5.4 ────────────────────── */ --lj-shadow-focus: 0 0 0 2px var(--lj-canvas), 0 0 0 4px var(--lj-ink); --lj-shadow-focus-on-dark: 0 0 0 2px var(--lj-surface-dark), 0 0 0 4px var(--lj-focus-on-dark); --lj-shadow-overlay: 0 8px 24px rgb(20 20 19 / 0.08), 0 0 0 1px var(--lj-border-hairline); --lj-shadow-nav: 0 1px 0 0 var(--lj-border-hairline); /* ── 字族栈｜视觉规范 §3.4 ───────────────────────────────────────── * 四个原始栈只在需要单独指定时使用；正常排版用下面的两个合成栈。 **中英混排规则（§4.2）**：同一节点内中西文必须同层， 所以合成栈把「西文族」放在「中文字族」之前，交给浏览器按字逐字回退。 */ --lj-font-serif-latin: "Source Serif 4", Georgia, "Times New Roman", serif; --lj-font-serif-zh: "Noto Serif SC", "Songti SC", "SimSun", serif; --lj-font-sans-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --lj-font-sans-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --lj-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* 论述层合成栈（宋体）——西文 Source Serif 4 + 中文思源宋体 */ --lj-font-serif: "Source Serif 4", "Noto Serif SC", Georgia, "Songti SC", "SimSun", serif; /* 功能层合成栈（黑体）——西文 Inter + 中文思源黑体 */ --lj-font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; /* ── 字号：中文｜视觉规范 §4.2 + 响应式 §4.3 ─────────────────────── * 命名 = 规范里的 token 名。桌面值在此，平板/移动值在 typography.css 里 覆写 :root（base 层 > tokens 层），这样字号阶梯只有一处定义。 分层：S = 论述层（宋体，≥19px） / F = 功能层（黑体，≤17px） 两层之间刻意留 2px 断层，18px 不得出现在任何中文节点上。 */ --lj-text-zh-display-dark: 96px; /* S · 400 · lh1.15 */ --lj-text-zh-display-hero: 72px; /* S · 400 · lh1.15 */ --lj-text-zh-display-section: 64px; /* S · 400 · lh1.20 */ --lj-text-zh-display: 48px; /* S · 400 · lh1.22 */ --lj-text-zh-display-md: 38px; /* S · 500 · lh1.30 */ --lj-text-zh-h1: 32px; /* S · 500 · lh1.35 */ --lj-text-zh-h2: 26px; /* S · 500 · lh1.40 */ --lj-text-zh-h3: 21px; /* S · 500 · lh1.45 */ --lj-text-zh-lead: 21px; /* S · 400 · lh1.85 */ --lj-text-zh-body: 19px; /* S · 400 · lh1.90 —— 中文正文基准 */ --lj-text-zh-quote: 22px; /* S · 400 · lh1.80 */ --lj-text-zh-nav: 17px; /* F · 400 · lh1.40 */ --lj-text-zh-button: 17px; /* F · 500 · lh1.40 */ --lj-text-zh-body-sm: 15px; /* F · 400 · lh1.75 */ --lj-text-zh-label: 13px; /* F · 500 · lh1.40 —— 中文最小字号 */ --lj-text-zh-caption: 13px; /* F · 400 · lh1.65 */ --lj-text-zh-eyebrow: 13px; /* F · 500 · lh1.40 · ls0.12em */ /* ── 字号：西文｜视觉规范 §4.1 + 响应式 §4.3 ─────────────────────── * 中文页面里这些 token 主要服务数字、缩写（AI/HR/L&D）与将来的英文内容。 中文节点**不得**直接用 latin 档位，那会掉进 12px / 18px 两个禁区。 */ --lj-text-display-dark: 110px; /* Serif 400 · lh1.05 */ --lj-text-display-hero: 88px; /* Sans 700 （唯一允许 Sans Bold 巨型） */ --lj-text-display-section: 90px; /* Serif 400 · **永不加粗** */ --lj-text-display: 68px; /* Serif 400 */ --lj-text-display-md: 48px; /* Serif 400 */ --lj-text-h1: 40px; /* Serif 400 */ --lj-text-h2: 32px; /* Serif 500 */ --lj-text-h3: 24px; /* Serif 600 */ --lj-text-body-lg: 24px; /* Serif 400 */ --lj-text-body-serif: 20px; /* Serif 400 */ --lj-text-body: 18px; /* Sans 400 —— 功能层西文正文基准 */ --lj-text-nav: 20px; /* Sans 400 */ --lj-text-button: 18px; /* Sans 600 */ --lj-text-body-sm: 15px; /* Sans 400 */ --lj-text-label: 12px; /* Sans 500 · 仅西文，中文用 zh-label */ --lj-text-eyebrow-latin: 16px; /* Mono 400 · uppercase */ --lj-text-number-stat: 56px; /* Sans 600 · tabular-nums */ /* ── 间距 scale｜视觉规范 §5.1（8px 基准，补 64/128 两档） ────────── */ --lj-space-1: 4px; --lj-space-2: 8px; --lj-space-3: 12px; --lj-space-4: 16px; --lj-space-5: 24px; --lj-space-6: 32px; --lj-space-7: 48px; --lj-space-8: 64px; --lj-space-9: 96px; --lj-space-10: 128px; /* 间距的非 scale 档：§5.1 断点表里的 72 / 56 / 40 / 28 / 20 不在 8px scale 上， 但它们是被规范显式指定的落地值，作为语义变量集中在此，避免散落魔法数字。 */ --lj-pad-block-desktop: 96px; /* 区块纵向内边距（常规） */ --lj-pad-block-tablet: 72px; --lj-pad-block-mobile: 56px; --lj-pad-hero-desktop: 128px; /* 首屏 / 页尾 CTA */ --lj-pad-hero-tablet: 96px; --lj-pad-hero-mobile: 64px; --lj-pad-card-desktop: 32px; /* 卡片内部 padding */ --lj-pad-card-tablet: 28px; --lj-pad-card-mobile: 24px; --lj-gap-heading-content: 48px; /* 区块标题 → 区块内容 */ --lj-gap-paragraph: 24px; /* 段落之间 */ --lj-gap-btn-group: 16px; /* 按钮组内间距 */ --lj-gap-icon-text: 8px; /* 图标与文字 */ /* ── 容器与栅格｜视觉规范 §5.2 + 信息架构 §6.1 ──────────────────── * 三档宽度，只能选一档，不得自定义： 全出血（由区块自身的背景色承担）/ 1280 标准容器 / 680 与 560 文本栏。 gutter：desktop 24 / tablet 24 / mobile 20（在 layout.css 覆写）。 */ --lj-container: 1280px; --lj-measure: 680px; /* 长段正文、引述 → 中文单行 30–36 字 */ --lj-measure-narrow: 560px; /* 表单、单列说明、/contact/ → 单行 ≈29 字 */ --lj-gutter: 24px; --lj-grid-gap: 24px; /* 12 栏栅格列间距（mobile 16px） */ /* ── 圆角｜视觉规范 §5.3 ─────────────────────────────────────────── */ --lj-radius-none: 0; --lj-radius-sm: 8px; --lj-radius-md: 12px; --lj-radius-lg: 16px; --lj-radius-xl: 24px; --lj-radius-pill: 9999px; /* 签名形状：实心按钮只圆下两角。全站唯一的形状签名，不得改成四角全圆。 */ --lj-radius-btn-solid: 0 0 8px 8px; /* ── 高度：导航与锚点｜视觉规范 §6.3 + 信息架构 §1.3 ─────────────── */ --lj-nav-h: 72px; --lj-nav-h-mobile: 64px; --lj-scroll-margin: 88px; /* 导航 72 + 16 呼吸，锚点跳转用 */ /* ── 动效｜视觉规范 §5.5 ─────────────────────────────────────────── * 允许：颜色/边框/透明度 200ms、位移 100ms、区块级 fade-up 800ms Once。 禁止：视差、缩放、旋转、渐进模糊、卡片 stagger、数字 count-up。 */ --lj-dur-fast: 100ms; --lj-dur-base: 200ms; --lj-dur-slow: 300ms; --lj-dur-enter: 800ms; --lj-ease: cubic-bezier(0.2, 0, 0.2, 1); --lj-reveal-shift: 8px; /* fade-up 的位移量 */ } }