/* ========================================================================== tokens.css · 中华网·永续农耕 唯一变量来源。颜色 / 字体 / 字号 / 间距 / 圆角 / 阴影 / 过渡 / 层级 断点登记（全站仅此三档，其他文件不得新增）： 手机 < 768px （base） 平板 768px – 1199px （@media (min-width: 768px)） 桌面 ≥ 1200px （@media (min-width: 1200px)） 两处例外（共 3 个数值：480 / 899 / 900；已备案，不算违反三档纪律，逐条说明为何不能并入）： 480px components.css「确认卡」两列并一列，767 处改会让 500–767 区间过窄 899/900px layout.css「移动抽屉 ↔ 顶部导航」切换点，与内容栅格无关， 跟随导航项文字宽度而非布局断点，并入 768 会让 768–899 挤成两行 容器：max-width 1280 / padding 20 · 40 · 80 ========================================================================== */ :root { /* ---------- 1. 颜色 · 基底 ---------- */ /* 2026-10-23 换色：方向 B「平衡」。绿接管强调位，土褐降为第二语义色。 纸底由暖米转微绿（H70 S33 L93），深色区由「湿土」转「林下阴影」。 全部数值经 WCAG 2.1 复算，注解里的比例可自行复核。 */ --color-paper: #F1F3E7; /* 页面主背景（微绿暖白） */ --color-paper-deep: #E4E8D5; /* 交替分区 / 次级表面 */ --color-soil: #1B2E21; /* 深色区 / 页脚（深林绿） */ --color-bg: var(--color-paper); --color-bg-alt: var(--color-paper-deep); --color-bg-deep: var(--color-soil); --color-surface: #FAFBF2; /* 卡片（比纸亮一档） */ --color-surface-sunken: #E4E8D5; /* 占位卡 / 表头 */ /* ---------- 2. 颜色 · 中性阶 ---------- */ /* 只把承载线条的 200/300 推向微绿，与纸底同调； 500 保持 #8A8274 不动——world-map.svg 内部描边烧死了这个值， 改它会让地图与页面脱钩。其余阶本期未被引用。 */ --color-n50: #F1F3E7; --color-n100: #E4E8D5; --color-n200: #D2D8C2; --color-n300: #B8BFA6; --color-n400: #9A9284; /* 禁止用作文字 */ --color-n500: #8A8274; --color-n600: #6B6355; --color-n700: #46413A; --color-n800: #1B2E21; --color-n900: #1A1815; /* ---------- 3. 颜色 · 文字 ---------- */ --color-ink: #1A1815; /* 纸上 15.79:1 */ --color-ink-2: #46413A; /* 纸上 9.01:1 */ --color-ink-3: #6B6355; /* 纸上 5.28:1 · 交替底 4.74:1 */ --color-ink-inverse: #F4F1EA; /* 深色区上 12.76:1 */ --color-ink-inverse-2: #BDB5A4; /* 深色区上 7.06:1 */ --color-ink-inverse-3: #9A9284; /* 深色区上 4.67:1 */ /* ---------- 4. 颜色 · 线 ---------- */ --color-line: #D2D8C2; /* 装饰分隔，不承载信息 */ --color-line-strong: #B8BFA6; /* 卡片 hover / 表格行线 */ --color-line-control: #8A8274; /* 需 3:1 的边界：纸上 3.39:1 */ --color-divider: #D2D8C2; /* ---------- 5. 颜色 · 强调（第一语义：活绿） ---------- */ --color-accent: #47732A; /* 活绿。纸上 4.99:1 · 按钮字（ink-inverse）4.96:1 */ --color-accent-ink: #375C1F; /* 强调文字/链接：纸上 6.90:1 */ --color-accent-soft: #9DBE6E; /* 深底上的强调：深色区上 6.87:1 */ --color-accent-tint: #E9F0DC; /* 强调浅底 */ --color-tech: #2E4A52; /* 次强调：远山青。纸上 8.44:1 */ --color-tech-soft: #93AFB7; /* 深底上的次强调：深色区上 6.21:1 */ --color-tech-tint: #E1E8EA; /* ---------- 5b. 颜色 · 第二语义：土褐 ---------- */ /* 管根系 / 土层 / 传统。只在 .mod-earth 作用域内接管 accent， 全局不出现，保证「绿与褐不同框」。见 components.css §mod-earth。 */ --color-earth: #8C5A2B; /* 纸上 5.18:1 */ --color-earth-ink: #7A4D22; /* 纸上 6.43:1 · tint 上 5.85:1 */ --color-earth-soft: #CB9A62; /* 深色区上 5.71:1 */ --color-earth-tint: #F0E6DA; /* ---------- 5c. 颜色 · 高光（≤2% 面积） ---------- */ --color-glow: #C6D64F; /* 深底高光：深色区上 9.00:1 */ --color-glow-ink: #71881C; /* 浅底高光：纸上 3.57:1（仅装饰） */ /* ---------- 6. 颜色 · 语义 ---------- */ --color-success: #2F6B4F; --color-success-bg: #E4EBE3; --color-warning: #7E5A14; --color-warning-bg: #F1E9D6; --color-danger: #8C3A2E; --color-danger-bg: #F2E4DF; --color-info: #2A5566; --color-info-bg: #E1E8EA; /* ---------- 7. 颜色 · 焦点与遮罩 ---------- */ /* 遮罩由暖黑 rgba(26,24,21) 改为绿黑 rgba(18,32,24)。 这一项极易漏：漏改则 hero 变成「绿站配棕遮罩」，照片上新绿会发脏。 */ --color-focus: #375C1F; /* 浅底上的焦点环，6.90:1 */ --color-focus-inverse: #9DBE6E; /* 深底上的焦点环，6.87:1 */ --color-scrim: rgba(18, 32, 24, 1); /* 首屏两层遮罩叠加。三档实测正文 390 2.56:1 / 1440 3.01:1，都不达 4.5。 算术结论：正文要 4.5:1，底色相对亮度必须 ≤0.157；1440 实测点 0.256， 而该点有效遮罩只有 0.49（本层 0.37 + hero-b 0.19 合成），需压到 0.62 以上。 改法不是整体加深，而是「把文字所在的那条带子抬起来」： 竖向 30%→50% 由 0.18 抬到 0.58（正文正落在这里）， 顶部 0~22% 反而略降到 0.55→0.22，让雾与梯田上部保持亮，画面不整片压死； 横向改成四档，文字列范围内稳在 0.62 上下，到 80% 才归零，右侧仍留亮田。 第一轮落完后 900 档正文只剩 4.81:1（余量 0.31，贴线），故把横向 42% 档 由 0.62 抬到 0.68；其余三档（0.78 / 0.30 / 0）不动。 这档对 1440 也生效（1440 由 6.64 升到更高，桌面左边略沉，可接受）。 两层叠加后文字区合成约 0.76–0.80。 */ --scrim-hero-a: linear-gradient(180deg, rgba(18,32,24,0.55) 0%, rgba(18,32,24,0.22) 22%, rgba(18,32,24,0.58) 50%, rgba(18,32,24,0.88) 100%); /* 窄屏专用：窄屏是唯一「两层都是竖向」的档位，a(0.58) 叠 b(0.40) 合成 0.75， 照片 p95 只回到 0.078（原样 0.281），仍然偏闷。 只把 50% 档由 0.58 降到 0.46（其余三档照抄），合成压到 0.68—— 实测正文 7.60 → 6.3 上下，仍远高于 5.0 的底线。 与 b 那一对结构完全对称：base 用 narrow，≥768 回原值。 */ --scrim-hero-a-narrow: linear-gradient(180deg, rgba(18,32,24,0.55) 0%, rgba(18,32,24,0.22) 22%, rgba(18,32,24,0.46) 50%, rgba(18,32,24,0.88) 100%); --scrim-hero-b: linear-gradient(90deg, rgba(18,32,24,0.78) 0%, rgba(18,32,24,0.68) 42%, rgba(18,32,24,0.30) 62%, rgba(18,32,24,0) 80%); /* <768 的文字通栏：hero-b 是「左浓右淡」的横向渐变，窄屏右半截文字 会落到几乎无遮罩的区域。窄屏换成竖向均匀遮罩——副标题由 2.21:1 抬到 5.63:1。 档位先给 0.55，但叠上竖向 scrim-hero-a(0.58) 后合成约 0.81，实测整屏 p95 亮度由 0.281 掉到 0.056（−80%）——那不是「压暗」，是照片被抹平了。 回调到 0.40（合成约 0.75），实测正文 9.07 → 7 上下，既读得清、照片也还在。 注意窄屏是唯一「两层都是竖向」的档位，所以这档只影响 <768。 */ --scrim-hero-b-narrow: linear-gradient(180deg, rgba(18,32,24,0.40) 0%, rgba(18,32,24,0.40) 100%); /* 有图页头（china / practice）压的是亮绿稻田，没有遮罩时导语实测 1.37:1。 文字全部落在距底 62% 以下，62% 处底色亮度压到 0.032： ink-inverse-2 得 6.28:1、accent-soft 得 6.10:1。 media 的 opacity 0.42 保持不变，亮度靠这层遮罩压，不靠降不透明度。 */ --scrim-header-image: linear-gradient(180deg, rgba(27,46,33,0.22) 0%, rgba(27,46,33,0.62) 30%, rgba(27,46,33,0.88) 62%, rgba(27,46,33,0.96) 100%); /* 收尾屏（屏14）压图：底图换成生长季绿田后必须重算遮罩。 窄屏文字通栏 → 单层竖向； ≥768 文字靠左 → 竖向 + 横向「文字侧」两层叠加，把右 1/4 的绿田留亮， 遮罩只压字所在的那一列，避免整屏又回落到暗橄榄。 */ --scrim-vision: linear-gradient(180deg, rgba(18,32,24,0.66) 0%, rgba(18,32,24,0.86) 100%); --scrim-vision-wide: linear-gradient(180deg, rgba(18,32,24,0.60) 0%, rgba(18,32,24,0.82) 100%); --scrim-vision-side: linear-gradient(90deg, rgba(18,32,24,0.38) 0%, rgba(18,32,24,0.22) 42%, rgba(18,32,24,0) 72%); --scrim-landing: linear-gradient(180deg, rgba(18,32,24,0) 0%, var(--color-paper) 100%); /* 屏01→屏02 落纸 */ /* ---------- 8. 字体 ---------- */ --font-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif; --font-num: Georgia, "Times New Roman", "Songti SC", serif; /* ---------- 9. 字号阶梯（手机 base） ---------- */ --fs-display: 36px; --fs-h1: 34px; --fs-h2: 27px; --fs-h3: 21px; --fs-h4: 18px; --fs-lead: 17px; --fs-body: 16px; --fs-sm: 14px; --fs-caption: 13px; --fs-eyebrow: 11px; --fs-num: 40px; --fs-num-sm: 22px; --fs-quote: 21px; --fs-quote-sm: 18px; /* 行高 / 字重 / 字距（不随断点变，除 display 行高） */ --lh-display: 1.10; --lh-h1: 1.16; --lh-h2: 1.24; --lh-h3: 1.34; --lh-h4: 1.44; --lh-lead: 1.82; --lh-body: 1.85; --lh-sm: 1.72; --lh-caption: 1.60; --lh-eyebrow: 1.40; --lh-quote: 1.70; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --ls-tight: 0.01em; --ls-normal: 0.02em; --ls-wide: 0.06em; --ls-eyebrow: 0.22em; --ls-vertical: 0.12em; /* ---------- 10. 间距（8px 系统） ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- 11. 容器与栅格 ---------- */ --container-max: 100%; --pad-x: 20px; --gutter: 16px; --grid-cols: 1; --nav-h: 56px; --measure: 100%; /* 正文行宽上限 */ /* ---------- 12. 区块纵向节奏 ---------- */ --pad-screen: 72px; /* 屏 02–13 上下 padding */ --pad-block: 48px; /* 屏内一级子块 */ --pad-subblock: 32px; /* 屏内二级子块 */ --pad-section: 56px; /* 栏目页分区 padding */ --pad-footer-t: 64px; --pad-footer-b: 40px; /* ---------- 13. 圆角（统一 2px 体系，不做胶囊/大圆角） ---------- */ --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; --radius-round: 50%; /* 只给六维节点 / 地图标志点 */ --radius-chip: 2px; /* ---------- 14. 阴影（几乎不用，靠边框与底色分层） ---------- */ --shadow-none: none; --shadow-card: 0 1px 0 rgba(18, 32, 24, 0.05); --shadow-float: 0 2px 8px rgba(18, 32, 24, 0.08); /* 仅地图浮层 */ /* ---------- 15. 过渡 ---------- */ --dur-fast: 160ms; --dur-base: 200ms; --dur-slow: 240ms; --dur-enter: 480ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-state: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- 16. 层级 ---------- */ --z-base: 1; --z-sticky: 50; --z-progress: 90; --z-topbtn: 95; --z-nav: 100; --z-drawer: 200; --z-skip: 300; /* ---------- 17. 动效降级开关 ---------- */ --motion-ok: 1; /* ========================================================================== 18. 衍生令牌（design-spec §5 组件规格中出现过的半透明/派生素材值） 集中登记在此，保证 base/layout/components/pages 四个文件里 不出现任何色值字面量。数值逐项取自 design-spec。 ========================================================================== */ --color-surface-hover: #FDFEF7; /* §5.4 卡片 hover 背景 */ --color-btn-hover: #3C6423; /* §5.3 主按钮 hover：按 ink-inverse 计 6.13:1（不是纯白；纯白才是 6.91） */ --color-btn-active: #2F5018; /* §5.3 主按钮 active：按 ink-inverse 计 8.16:1（同上，纯白 9.20） */ --color-ghost-active: #DDE6CC; /* §5.3 次按钮 active（ink 13.72:1） */ --color-step-alt: #EDF1DF; /* §5.15 价值链交替底（ink-3 5.15:1） */ --color-topbar-scrolled: rgba(241, 243, 231, 0.96); /* §5.1 导航实底 */ --color-card-border-hover: rgba(71, 115, 42, 0.55); /* §5.4 卡片 hover 描边 */ --color-dash: rgba(132, 140, 116, 0.65); /* §5.4 占位卡虚线 */ /* 未完成态的虚线要退到背景里，不能和可点行的 accent 边框抢注意力； 但保留虚线形状——实线在中文界面里读作「已确认的字段」， 而占位行的语义恰恰是「还没有内容」。 */ --color-dash-weak: rgba(132, 140, 116, 0.40); /* 占位行（非交互）虚线 */ --color-line-inverse-weak: rgba(241, 243, 231, 0.12); /* §5.11 页脚列间线 */ --color-line-inverse-mid: rgba(241, 243, 231, 0.35); /* §5.11 备案虚线 */ --color-ghost-border-dark: rgba(241, 243, 231, 0.45); /* §5.3 深底次按钮描边 */ --color-ghost-bg-dark: rgba(241, 243, 231, 0.10); /* §5.3 深底次按钮 hover */ --color-row-hover: rgba(233, 240, 220, 0.60); /* §5.16 表行 hover */ --color-pin-halo: rgba(71, 115, 42, 0.18); /* §5.14 标志点光环 */ --color-pin-halo-strong: rgba(71, 115, 42, 0.30); /* §5.14 hover 光环 */ --color-chip-sunken: rgba(241, 243, 231, 0.90); /* §5.4 占位卡角标底 */ --color-texture-line: rgba(27, 46, 33, 0.07); /* §5.13 等高线纹理 */ } /* ========================================================================== 平板 768px – 1199px ========================================================================== */ @media (min-width: 768px) { :root { --fs-display: 56px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 20px; --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; --fs-num: 48px; --fs-num-sm: 24px; --fs-quote: 26px; --fs-quote-sm: 19px; --lh-display: 1.10; --lh-h1: 1.16; --lh-h2: 1.22; --lh-h3: 1.32; --container-max: 100%; --pad-x: 40px; --gutter: 24px; --grid-cols: 12; --nav-h: 64px; --measure: 100%; --pad-screen: 96px; --pad-block: 64px; --pad-subblock: 40px; --pad-section: 80px; --pad-footer-t: 96px; --pad-footer-b: 48px; } } /* ========================================================================== 桌面 ≥ 1200px ========================================================================== */ @media (min-width: 1200px) { :root { --fs-display: 72px; --fs-h1: 64px; --fs-h2: 44px; --fs-h3: 30px; --fs-h4: 21px; --fs-lead: 20px; --fs-body: 17px; --fs-sm: 15px; --fs-caption: 13px; --fs-eyebrow: 12px; --fs-num: 56px; --fs-num-sm: 26px; --fs-quote: 30px; --fs-quote-sm: 21px; --lh-display: 1.08; --lh-h1: 1.14; --lh-h2: 1.22; --lh-h3: 1.32; --container-max: 1280px; --pad-x: 80px; --gutter: 24px; --grid-cols: 12; --nav-h: 72px; --measure: 720px; /* 正文行宽上限 */ --pad-screen: 128px; --pad-block: 64px; --pad-subblock: 48px; --pad-section: 96px; --pad-footer-t: 128px; --pad-footer-b: 64px; } } /* ========================================================================== 动效降级（site-spec A9） ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-enter: 0.01ms; } }