/* ============================================================================
   FreshStar · 设计令牌真源  1-tokens（内容寻址卷 <stem>.<md5前8>.css，R213.0b 起）   （R211 Stage 5 · 2026-10-16）
   ============================================================================
   定位（CLAUDE.md 前端铁律 6：三层令牌体系 1-tokens → 2-base → 3-components）：
     本文件 = 全站设计令牌的**唯一真源**。颜色 / 间距 / 圆角 / 字号 / 行高 /
     控件 / 动效 / 层级 / 纵向节奏，全部在此定义，新代码只许引用令牌、不许写死值。

   过渡期说明（重要）：
     · R213.0 起：fs-core 卷中的令牌副本已删除（其获胜值全部并入本文件，
       含 --c-cta/--c-text-3 两处与旧副本不一致的 R191/rework176 新值）；
       其余历史卷（fs-app / fs-shell …）的副本待后续逐卷收敛。
     · 加载顺序：本文件在 fs_shell_css() 资产链**最前**（先于 fs-shell/fs-core），
       后加载的同名定义值相同、互相覆盖无副作用。
     · 补档项（历史卷没有、本文件新增明确可用）：
         --c-bg-2  #F8FAFC（比 --c-bg 更浅一档的背景，审计指名的未令牌化值）
         --sh-1/2/3 阴影梯度（自 fs-admin-ios 卷收敛，全站 166 处引用的真源补上）
     · Stage 6 及以后：历史卷里的副本逐卷删除，收敛完成后本文件是唯一一份。

   令牌使用约定（R479 起，新代码照此执行）：
     · fsc2 页面（<html data-ui="fsc2">）的页面皮肤只用 --fs-*：它们是 fsc2 组件卷的
       私有刻度，只服务 fsc2 的视觉语言，改一处不波及未迁移页面。
     · 跨页组件（2-base / 3-components / 4-fsc-kit / 后台 admin 卷）只用 --c-*：这些卷
       在非 fsc2 页面也要生效，引用 --fs-* 只会拿到 undefined（少写一个 fallback 就是裸样式）。
     · 新代码不得直接写颜色字面值（#hex / rgb() / rgba()）：一律引用本文件令牌；确需新色
       先在这里加令牌并写清语义，再去引用。
     · 12 条「fsc2 对照」注释记录了 2026-11-04 批 2b 的对齐结果：10 组已同值，可直接互换；
       --c-fill-2 由新增的 --fs-surface-4 承接（同值）；只有 --c-text-4 与 --fs-ink-4 仍是
       序号相同、语义相反（禁用灰 vs 正文灰），二者禁止互相别名。

   命名规范（沿用站内既有约定，不另起炉灶）：
     --c-*  颜色   --s-* 间距(4px 基准)   --r-* 圆角   --t-* 字号
     --lh-* 行高   --ctl-* 控件           --z-* 层级   --ease/--dur 动效
     --sh-* 阴影   --rhythm-* 纵向节奏
   ============================================================================ */

@layer fs.tokens;

@layer fs.tokens {
  :root {
    /* ── 品牌与状态色 ────────────────────────────────────────────── */
    --c-brand:        #1657D9;          /* R408：全站唯一品牌蓝，与 fsc2 --fs-brand 同源 */
    --c-brand-rgb:    22, 87, 217;     /* 给 rgb(var(--c-brand-rgb)) 用 */
    --c-brand-weak:   rgba(22, 87, 217, .12);
    --c-brand-weak-2: rgba(22, 87, 217, .34);
    --c-cta:          #1E6FD0;          /* R191 蓝绿收敛：行动色并入品牌蓝系（白字 4.95:1） */
    --c-danger:       #b42318;          /* 危险；fsc2 对照：↔ --fs-danger(#b42318)，R483 起同值（白字 6.57:1） */
    --c-danger-rgb:   180, 35, 24;     /* R483 跟随 --c-danger 同步，rgba(var(--c-danger-rgb)) 不偏色 */
    --c-success:      #0b7a55;          /* 成功；fsc2 对照：↔ --fs-live(#0b7a55)，R483 起同值（白字 5.34:1） */
    --c-warning:      #b45309;          /* 警告；fsc2 对照：↔ --fs-warn(#b45309)，R483 起同值（白字 5.02:1） */
    --fs-ok:          #0B7A55;          /* R191 语义成功绿 */
    --fs-ok-bg:       #E6F5F1;
    --fs-gold-ink:    #8A5A06;          /* 标签文字琥珀（AA） */

    /* ── 文字（4 级） ────────────────────────────────────────────── */
    --c-text:    #0d1521;               /* fsc2 对照：正文一级 ↔ --fs-ink(#0d1521)，R483 起同值 */
    --c-text-2:  #33415a;               /* fsc2 对照：正文二级 ↔ --fs-ink-2(#33415a)，R483 起同值 */
    --c-text-3:  #4a5a72;               /* 占位符 · rework176 曾提到 #5F7288(4.94:1)；fsc2 对照：R483 对齐 --fs-ink-3 收到 #4a5a72（7.01:1，页面底 6.47:1） */
    --c-text-4:  #A9B8C9;               /* 禁用/四级灰，不是正文；fsc2 对照：--fs-ink-4(#5b6b85) 才是正文灰 —— 序号相同、语义相反，二者禁止互相别名（误别名会让全站正文变浅灰） */
    /* 禁用灰的唯一别名（R479 新增）：语义＝ --c-text-4 的「禁用/四级灰」，在 fsc2 命名下表达
       「不可用」。正文永远不用它（正文走 --fs-ink-4 / --fs-ink-3）。只新增别名，不改任何现有引用。 */
    --fs-ink-muted: var(--c-text-4);

    /* ── 面与线 ──────────────────────────────────────────────────── */
    --c-bg:      #f4f6f9;               /* fsc2 对照：页面底 ↔ --fs-canvas(#f4f6f9)，R483 起同值 */
    --c-bg-2:    #F8FAFC;               /* 补档：更浅一档背景（审计指名） */
    --bg-canvas: var(--c-bg-2);         /* R228：页面画布底色别名（铁律点名值 #F8FAFC，零新增 hex） */
    --bg-card:   var(--c-card);         /* R228：卡片容器底色别名 */
    --c-card:    #FFFFFF;
    --c-fill:    #eef2f7;               /* 控件静默态底色；fsc2 对照：↔ --fs-surface-3(#eef2f7)，R483 起同值 */
    --c-fill-2:  #E9EFF6;               /* 控件 hover；fsc2 对照：已补 --fs-surface-4(#E9EFF6)，R483 起同值（两档层级保留） */
    --c-line:    #e6eaf0;               /* fsc2 对照：一级线 ↔ --fs-line(#e6eaf0)，R483 起同值 */
    --c-line-2:  #d7dde7;               /* fsc2 对照：二级线 ↔ --fs-line-3(#d7dde7)，R483 起同值 */

    /* ── 间距阶梯（4px 基准） ───────────────────────────────────── */
    --s-0: 4px;   --s-1: 8px;   --s-2: 12px;  --s-3: 16px;  --s-4: 20px;
    --s-5: 24px;  --s-6: 28px;  --s-7: 32px;  --s-8: 40px;
    --s-9: 56px;  --s-10: 72px;         /* R178：区段级留白（原阶梯封顶 40，桌面区段之间拉不开） */
    /* 旧名别名 —— 值与原定义逐一对齐，保证现有引用行为不变。
       ⚠ 旧 --sp-5 是 28px，对应新 --s-6；别改成 --s-5（24px）会全站位移。 */
    --sp-0: var(--s-0);  --sp-1: var(--s-1);  --sp-2: var(--s-2);
    --sp-3: var(--s-3);  --sp-4: var(--s-4);  --sp-5: var(--s-6);
    --sp-6: var(--s-7);  --sp-7: var(--s-8);
    --sp-gutter: var(--s-3);

    /* ── 圆角 ────────────────────────────────────────────────────── */
    --r-1: 6px;   --r-2: 10px;   --r-3: 14px;   --r-full: 999px;

    /* ── 字号（12px 是本站底线，不要再往下加档） ─────────────────── */
    --t-xs: 12px;  --t-sm: 13px;  --t-md: 14px;  --t-lg: 16px;
    --t-xl: 18px;  --t-2xl: 22px;
    /* R178 展示档：原阶梯封顶 22px，与正文 15px 只差 1.47 倍 —— 层级是平的。
       用 clamp 做流体：窄屏不溢出、宽屏给足气势。字距收紧是大字号 CJK 的必修课。 */
    --t-3xl: clamp(24px, 1.6vw + 18px, 30px);    /* 区块标题 / 页面标题 */
    --t-4xl: clamp(30px, 2.4vw + 22px, 44px);    /* 英雄区主张（全站唯一展示级） */
    --track-display: -.012em;

    /* ── 行高 ────────────────────────────────────────────────────── */
    --lh-tight: 1.35;  --lh-base: 1.5715;  --lh-loose: 1.8;  --lh-display: 1.15;   /* R178 展示级行高 */

    /* ── 控件 ────────────────────────────────────────────────────── */
    --ctl-h: 40px;                      /* 桌面高度；移动端 44px 触控底线 */
    --ctl-pad-x: 12px;
    --ctl-ring: 0 0 0 3px var(--c-brand-weak);

    /* ── 触控与底部常驻条（R220 · S2 跨会话接口，协调契约 v1.1 Milestone-0） ──
       · --tap-min：触控目标最小热区（iOS HIG 44pt）；配合 3-components 的
         .tap-44 / .fs-stickybar 使用，不改控件自身观感。
       · --inp-fs-min：移动端输入框最小字号 —— 低于 16px 时 iOS Safari 聚焦
         会自动放大页面（全站现值为 16px，此令牌供新表单统一引用）。
       · --sticky-bottom：底部常驻条的统一锚点（tabbar 高度 + 安全区 + 间隙），
         与下单页 .obb 现行几何同口径；--tabbar-h 未定义时回落 60px。 */
    --tap-min: 44px;
    --inp-fs-min: 16px;
    --sticky-gap: 10px;
    --sticky-bottom: calc(var(--tabbar-h, 60px) + env(safe-area-inset-bottom, 0px) + var(--sticky-gap));

    /* ── 动效 ────────────────────────────────────────────────────── */
    --ease: cubic-bezier(.23, 1, .32, 1);
    --dur-fast: .1s;  --dur: .16s;  --dur-slow: .24s;

    /* ── 阴影梯度（补档：自 fs-admin-ios 卷收敛为真源，全站 166 处引用） ── */
    --sh-1: 0 1px 2px rgba(16,42,74,.05), 0 2px 8px rgba(16,42,74,.05);
    --sh-2: 0 4px 16px rgba(16,42,74,.09);
    --sh-3: 0 12px 32px rgba(10,31,60,.16);
    /* R230：三级高度体系 —— 卡片 / 抬起 / 品牌落影。旧 --sh-1/2/3 语义是「小/中/大」，
       实际全站只用 --sh-1 一个值，层次读不出来；这里按「用途」补三档，值仍走品牌色投影。 */
    --sh-card: 0 1px 2px rgba(16,42,74,.05), 0 6px 20px -14px rgba(16,42,74,.30);
    --sh-lift: 0 2px 6px rgba(16,42,74,.06), 0 18px 34px -20px rgba(16,42,74,.38);
    --sh-brand: 0 1px 2px rgba(22,87,217,.26), 0 10px 24px -12px rgba(22,87,217,.58);
    --ring-brand: 0 0 0 1px var(--c-brand) inset, 0 0 0 3px var(--c-brand-weak);   /* 聚焦环（输入框用 inset 版） */
    --dur-ui: .18s;                     /* 交互过渡统一档（旧 --dur .16 保留，微交互仍可用） */
    --track-overline: .08em;            /* 小字标签字距（表头 / 统计标签 / 面包屑） */

    /* ── 层级阶梯（集中管理，避免再出现 2147483000 这种魔数）
       · 新增层级**只从这张表里挑**，不要再手填数字。
       · 值 = 替换前各处的历史字面量（给已有层级起名，不是重新分层），
         换成 var() 后每个元素的计算 z-index 逐字节不变。 ─────────────── */
    --z-behind:        0;            /* 背景装饰（login .aurora） */
    --z-base:          1;            /* 内容抬升：相对定位的正文块、粘性表头 */
    --z-raise:         2;            /* 卡片 hover / 局部前景（.pcard:hover、.grain） */
    --z-raise-2:       3;            /* 局部最前（支付操作区、加载文字） */
    --z-scrim:         9;            /* 后台抽屉遮罩 */
    --z-drawer:        10;           /* 后台抽屉 / 侧栏 */
    --z-bar:           60;           /* 移动端常驻操作栏（.obb / .run-bar） */
    --z-catnav:        80;           /* 商城分类吸顶条 */
    --z-head:          120;          /* 桌面主导航（.dh-nav） */
    --z-pop:           600;          /* 顶栏下拉浮层 */
    --z-appbar:        900;          /* 页面级顶栏（.appbar / .top / .drw） */
    --z-float:         950;          /* 悬浮件：回到顶部、账户弹层 */
    --z-tabbar:        1000;         /* 移动端底部 Tab 栏 */
    --z-sheet:         1200;         /* 底部抽屉遮罩 / 免责 dock */
    --z-paymask:       1300;         /* 支付遮罩 */
    --z-getmask:       1400;         /* 领取遮罩 */
    --z-pagemask:      1999;         /* 页面级遮罩（qg） */
    --z-skip:          3000;         /* 跳转链接（键盘可访问性） */
    --z-modal:         9000;         /* 弹窗（fs-modal .fsm-box） */
    --z-toast:         9500;         /* 提示条（.fsm-toast-wrap） */
    --z-tip:           9600;         /* 浮签（.fsm-tip） */
    --z-navbar:        99999;        /* 顶部公告条（.fsnbar） */
    --z-loading:       2147483000;   /* 全屏加载遮罩（#fsl、.fs-toasts）—— 必须最前 */
    --z-loading-toast: 2147483002;   /* 加载遮罩之上的请求提示（#fsl-toast） */
  }

  /* 纵向节奏令牌。
     ⚠ 顺序不能反：**基础值（移动端）必须写在媒体查询之前**。
     同一层内、同特异性（都是 :root），**后写的胜出**。 */
  :root {
    --rhythm-card: var(--s-3);          /* 移动端：16 卡片内边距 */
    --rhythm-gap:  var(--s-2);          /* 移动端：12 块间距 */
    --rhythm-head: var(--s-1);          /* 移动端：8  标题下间距 */
    --rhythm-block: var(--s-5);         /* R178 移动端：块与块 24 */
    --rhythm-section: var(--s-7);       /* R178 移动端：区段之间 32 */
  }
  /* 桌面纵向节奏（用户选定中密度 20/16/12）—— 必须排在基础值之后 */
  @media (min-width: 821px) {
    :root {
      --rhythm-card: var(--s-4);        /* 20 卡片内边距 */
      --rhythm-gap:  var(--s-3);        /* 16 块间距 */
      --rhythm-head: var(--s-2);        /* 12 标题下间距 */
      --rhythm-block: var(--s-6);       /* R178 桌面：28 */
      --rhythm-section: var(--s-9);     /* R178 桌面：56（区段之间要敢留白） */
    }
  }

  /* Arco Design 的令牌名映射到本站品牌 —— 控件层是 Arco 规范，
     它内部用 rgb(var(--primary-6)) 这类写法，值必须是 R,G,B 三元组。 */
  --primary-6: var(--c-brand-rgb);
  --primary-2: 232, 240, 252;
  --color-primary-light-2: var(--c-brand-weak);
  --color-primary-light-3: var(--c-brand-weak-2);
  --color-text-1: var(--c-text);
  --color-text-3: var(--c-text-3);
  --color-text-4: var(--c-text-4);
  --color-fill-2: var(--c-fill);
  --color-fill-3: var(--c-fill-2);
  --color-neutral-3: var(--c-line);
  --color-neutral-4: var(--c-line-2);
  --color-bg-2: var(--c-card);
  --border-radius-small: var(--r-2);
  --border-radius-medium: var(--r-2);
}