/* synced from 元丰-设计规范 v1.0 */
/* ============================================================
   元丰净化 · 设计令牌 Design Tokens
   v1.0 · 单一真源
   ------------------------------------------------------------
   规则：全站任何颜色 / 字号 / 间距 / 圆角 / 动效，
   都必须引用此文件的变量，禁止在业务样式里写死数值。
   改一个值，全站同步。
   ============================================================ */

:root {

  /* ==================== 1. 色彩 ==================== */

  /* --- 主色 森林绿 Forest：品牌主色，用于强调、链接、深色区块 --- */
  --green-50:  #f2f7f3;
  --green-100: #dcebe1;
  --green-200: #b9d6c3;
  --green-300: #8bba9c;
  --green-400: #5a9a72;
  --green-500: #2f7850;
  --green-600: #1f5d40;   /* ← 品牌主色 */
  --green-700: #184c34;
  --green-800: #113625;
  --green-900: #0f2c1e;   /* ← 深色区块底 */

  /* --- 中性 暖纸 Warm Paper：整个站点的骨架色 --- */
  --paper-0:   #ffffff;   /* 卡片、面板 */
  --paper-25:  #faf8f4;   /* 浅色区段 */
  --paper-50:  #f4f1ea;   /* ← 页面底色 */
  --paper-100: #ece7db;   /* 浅分割线、占位底 */
  --paper-200: #e3ddd0;   /* ← 默认描边 */
  --paper-300: #cfc8b8;
  --paper-400: #b0a897;
  --paper-500: #9a958a;   /* 弱化文字（仅大字号/非文本） */
  --paper-600: #6c685d;   /* 次要文字 */
  --paper-700: #4a473f;
  --paper-800: #2b2f34;   /* 深色文字 */
  --paper-900: #16181b;   /* ← 正文主色 */

  /* --- 辅助色 黄铜 Brass：工程标签、编号、细线，绝不用于大面积 --- */
  --brass-50:  #fbf3e9;
  --brass-100: #f4e2c8;
  --brass-200: #e8c795;
  --brass-300: #d9a860;
  --brass-400: #c98a3f;
  --brass-500: #b9762f;   /* ← 基准 */
  --brass-600: #a4661f;   /* hover */
  --brass-700: #86501a;
  --brass-800: #663c14;
  --brass-900: #45280e;

  /* --- 语义色 --- */
  --success:     #2f7850;
  --success-bg:  #eef5f0;
  --warning:     #a4661f;
  --warning-bg:  #fbf3e9;
  --danger:      #a8322c;
  --danger-bg:   #fbeeed;
  --info:        #2c6e8a;
  --info-bg:     #eaf1f5;

  /* ==================== 2. 系列识别色（极弱编码） ====================
     三大系列各有一个身份色，全站占比不超过 5%。
     仅用于：品类编号文字、卡片顶部细线、面包屑小点、筛选器激活态。
     -ink 变体用于小字号文字，保证 WCAG AA 4.5:1。
     -soft 用于极浅底色。 */
  --series-air:        #5e8c4a;   /* 空气过滤 AF */
  --series-air-ink:    #446a35;
  --series-air-soft:   #eef2e9;

  --series-water:      #2c6e8a;   /* 净水滤芯 WF */
  --series-water-ink:  #24596f;
  --series-water-soft: #eaf1f5;

  --series-dust:       #9a6432;   /* 除尘滤袋 DF */
  --series-dust-ink:   #7d5026;
  --series-dust-soft:  #f6efe8;

  /* ==================== 3. 语义化别名（业务层优先用这些） ==================== */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-soft:        var(--paper-25);
  --bg-inverse:     var(--green-900);
  --bg-placeholder: var(--paper-100);

  --text-primary:   var(--paper-900);
  --text-secondary: var(--paper-600);
  --text-tertiary:  var(--paper-500);
  --text-inverse:   #f3efe6;
  --text-inverse-muted: #a9b3a8;

  --border-default: var(--paper-200);
  --border-soft:    var(--paper-100);
  --border-strong:  var(--paper-400);
  --border-inverse: rgba(255, 255, 255, .14);

  --link:           var(--green-600);
  --link-hover:     var(--green-700);
  --accent:         var(--brass-500);
  --focus-ring:     var(--brass-500);

  /* ==================== 4. 字体 ==================== */
  /* 不引外链字体：国内服务器访问 Google Fonts 会超时，
     改用系统栈，靠字号/字重/字距建立层级。若日后要上品牌字体，
     请自托管 woff2 到 assets/fonts/ 并替换此变量。 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono",
               Consolas, "Liberation Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  /* 字号阶梯 · 8 级，比例约 1.28 */
  --text-micro: 12px;   /* 编号、技术标签、图注 */
  --text-small: 14px;   /* 辅助说明、表格、表单 */
  --text-body:  16px;   /* 正文基准 */
  --text-lead:  20px;   /* 导语、卡片大标题 */
  --text-h3:    26px;
  --text-h2:    34px;
  --text-h1:    46px;
  --text-display: 62px; /* 仅首页 Hero */

  /* 字重 · 只用 3 档 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* 行高 */
  --lh-tight: 1.14;   /* 大标题 */
  --lh-snug:  1.3;    /* 小标题 */
  --lh-body:  1.75;   /* 中文正文 */
  --lh-loose: 1.9;

  /* 字距 */
  --ls-tight: -.4px;  /* 大标题收紧 */
  --ls-normal: 0;
  --ls-wide:  .5px;   /* 中文小标题微开 */
  --ls-mono:  1.5px;  /* 等宽标签 */

  /* ==================== 5. 间距 · 8pt 栅格 ==================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* 语义化间距 */
  --section-py: clamp(56px, 7vw, 96px);   /* 区块上下留白 */
  --block-gap:  var(--sp-5);              /* 区块内元素间距 */
  --card-pad:   var(--sp-5);
  --gutter:     var(--sp-5);              /* 网格间隙 */

  /* ==================== 6. 容器与栅格 ==================== */
  --container: 1200px;
  --container-narrow: 860px;
  --container-pad: 24px;
  --grid-cols: 12;
  --header-h: 72px;
  --sidebar-w: 248px;   /* 规范站侧栏 */

  /* ==================== 7. 圆角 · 3 档 ==================== */
  --r-sm: 2px;   /* 按钮、输入框、标签：保持工业硬朗 */
  --r-md: 4px;   /* 卡片、面板 */
  --r-lg: 8px;   /* 大容器、灯箱、图片 */
  --r-pill: 999px;

  /* ==================== 8. 阴影 · 3 档 ==================== */
  --sh-1: 0 1px 2px rgba(20, 24, 20, .04);
  --sh-2: 0 1px 2px rgba(20, 24, 20, .04), 0 8px 30px rgba(20, 24, 20, .07);
  --sh-3: 0 24px 70px rgba(0, 0, 0, .38);

  /* ==================== 9. 描边宽度 · 3 档 ==================== */
  --bw-1: 1px;
  --bw-2: 2px;   /* 焦点环 */
  --bw-3: 3px;   /* 选中强调 / 系列色条 */

  /* ==================== 10. 动效 ==================== */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --ease:      cubic-bezier(.2, .7, .3, 1);
  --ease-out:  cubic-bezier(0, 0, .2, 1);

  /* ==================== 11. 层级 ==================== */
  --z-base:    1;
  --z-sticky:  60;
  --z-drawer:  120;
  --z-lightbox: 200;

  /* ==================== 12. 系列色自动映射 ==================== */
  /* 用 data-series 属性即可让整个卡片 / 区块继承对应系列色 */
}

/* 系列色上下文：给任意元素加 data-series="air|water|dust" */
[data-series="air"]   { --series: var(--series-air);   --series-ink: var(--series-air-ink);   --series-soft: var(--series-air-soft); }
[data-series="water"] { --series: var(--series-water); --series-ink: var(--series-water-ink); --series-soft: var(--series-water-soft); }
[data-series="dust"]  { --series: var(--series-dust);  --series-ink: var(--series-dust-ink);  --series-soft: var(--series-dust-soft); }

/* 无系列时的兜底，避免 var(--series) 解析失败 */
:root {
  --series: var(--brass-500);
  --series-ink: var(--brass-600);
  --series-soft: var(--brass-50);
}