/* ==========================================================================
   TOKENS — Neoprene Fabric Factory
   设计令牌层：颜色 / 字阶 / 间距 / 圆角 / 阴影 / 动效
   方向：工业实用（Industrial / Utilitarian）
   主表面：暖工业米白（非纯白）· 对比区块：橡胶炭黑 · 唯一强调色：安全橙
   ========================================================================== */

:root {
  /* --- 颜色：主表面 / 对比表面 --------------------------------------- */
  --color-bg:            #F2EFE8;   /* 工业米白，暖调，非纯白 */
  --color-surface:       #FAF8F3;   /* 卡片、抬升面 */
  --color-surface-sunk:  #E8E4DA;   /* 下沉区、表格斑马纹 */
  --color-ink:           #14161A;   /* 橡胶炭黑：深色区块底 */
  --color-ink-soft:      #1E2126;   /* 深色区块内的次级面 */

  /* --- 颜色：文字 ----------------------------------------------------- */
  --color-text:          #1A1C1F;   /* 暖调近黑，禁用纯 #000 */
  --color-text-muted:    #6B6A63;   /* 次要说明文字 */
  --color-text-faint:    #97958C;   /* 标注、meta */
  --color-text-on-ink:   #F2EFE8;   /* 深色区块上的正文 */
  --color-text-on-ink-m: #A8A69D;   /* 深色区块上的次要文字 */

  /* --- 颜色：强调 ----------------------------------------------------- */
  --color-accent:        #FF4D00;   /* 国际安全橙 —— 全站唯一强调色 */
  --color-accent-deep:   #D63F00;   /* 按下态 */
  --color-accent-wash:   rgba(255, 77, 0, 0.08);

  /* --- 颜色：语义 ----------------------------------------------------- */
  --color-border:        rgba(26, 28, 31, 0.14);  /* 发丝线 */
  --color-border-strong: rgba(26, 28, 31, 0.28);
  --color-border-on-ink: rgba(242, 239, 232, 0.16);
  --color-ok:            #1F7A4D;   /* 通过 / 已认证 */
  --color-warn:          #B26A00;   /* 待确认 */

  /* --- 字体 ----------------------------------------------------------- */
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace;

  /* --- 字阶（模块化，比例 ~1.22，工业紧凑） --------------------------- */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  19px;
  --fs-xl:  23px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-4xl: 42px;
  --fs-5xl: 56px;
  --fs-6xl: 72px;
  --fs-7xl: 96px;

  /* --- 行高 / 字距 ---------------------------------------------------- */
  --lh-tight:  0.98;
  --lh-snug:   1.14;
  --lh-normal: 1.55;
  --lh-loose:  1.7;
  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-wide:     0.06em;
  --ls-wider:    0.14em;

  /* --- 间距梯度 ------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  56px;
  --sp-9:  72px;
  --sp-10: 96px;
  --sp-11: 128px;

  /* --- 圆角（工业风偏方正） ------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* --- 阴影：3 级，带环境色而非纯黑 ----------------------------------- */
  --shadow-1: 0 2px 8px rgba(20, 22, 26, 0.06);
  --shadow-2: 0 8px 28px rgba(20, 22, 26, 0.10);
  --shadow-3: 0 24px 64px rgba(20, 22, 26, 0.16);

  /* --- 动效 ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  160ms;
  --dur-base:  320ms;
  --dur-slow:  640ms;

  /* --- 布局 ----------------------------------------------------------- */
  --wrap:       1240px;
  --wrap-narrow: 880px;
  --gutter:     var(--sp-6);

  /* --- 装饰：技术图纸网格线 ------------------------------------------- */
  --grid-line:      rgba(26, 28, 31, 0.055);
  --grid-line-ink:  rgba(242, 239, 232, 0.06);
  --grid-size:      28px;
}

/* 深色区块内部使用的局部令牌覆盖 —— 组件代码无需改动 */
.on-ink {
  --color-text:        var(--color-text-on-ink);
  --color-text-muted:  var(--color-text-on-ink-m);
  --color-text-faint:  #7C7A72;
  --color-border:      var(--color-border-on-ink);
  --color-border-strong: rgba(242, 239, 232, 0.32);
  --color-surface:     var(--color-ink-soft);
  --color-surface-sunk: #0E1013;
}