/* ============================================================
   银序 SILVERA · 设计令牌（Design Tokens）
   来源：index-shop.html（线上 moclar.com v3 独立站版）
   由 tools/extract_tokens.py 生成，手工修改请改 tokens.json
   原则：所有模板只引用这里定义的变量，不内联硬编码色值
   ============================================================ */

:root{
  /* ---- 颜色 · 语义 ---- */
  --bg:#FAFAF8;             /* 页面底色 · 象牙白 */
  --surface:#FFFFFF;        /* 卡片/浮层底色 · 纯白 */
  --ink:#111111;            /* 主文字 · 近黑 */
  /* ---- 次级 / 弱化两档（2026-10-14 两次加深）----------------------------
     ⚠️ 第一轮只做到「达标」（WCAG AA 4.5:1），老板看完仍然说「还要加深」。
        ⇒ 记一条：**「达标」与「他看着够清楚」是两件事**；这次一步压到明显更深。
     三档层次（象牙白底实测）：
       · 主文字 --ink #111111 = 18.07
       · 次级 --muted #33332F = **12.14**（第一轮 7.18 / 最初 5.12）
       · 弱化 --faint #47473F = **8.97**（第一轮 4.91 / 最初 2.70）
     ⚠️ 改这里要连着改 design/tokens.json（源）与 index.html 自带的那份 :root
        （首页是自包含页，两处漂开时它会独自发浅 —— 判据盯着这条）。 */
  --muted:#33332F;          /* 次级文字 · 象牙白底 12.14:1 */
  --faint:#47473F;          /* 弱化文字 / 占位 · 象牙白底 8.97:1 */
  --line:#e5e3de;           /* 分隔线 · 边框 */
  --wash:#F3F1EC;           /* 浅色区块底 · 分区节奏 */
  --accent:#47473F;         /* 强调色（星级符号）· 2026-10-14 两次加深：最初 #A8A9AD 只有 2.25:1 */
  --accent-deep:#2F2F2B;    /* 强调色深阶 · hover 态 / 小标题 · 最初 #7c7d81 = 3.93:1 */
  --sale:#B4413A;           /* 促销色 · 全站唯一暖色，只用于价格与倒计时 */
  --radius:2px;             /* 统一圆角 · 极简轻奢用近直角 */

  /* ---- 扩展色（基线新增，供后续章节使用） ---- */
  --gold:#e8c9a0;        /* 香槟金 · 仅用于促销条重点词 */
  --ink-soft:#1c1b19;    /* 深色区块底 */

  /* ---- 字体 ---- */
  --font-sans:'Noto Sans SC','Sora',sans-serif;
  --font-en:'Sora','Noto Sans SC',sans-serif;

  /* ---- 字号阶梯 ---- */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:22px;
  --fs-xl:32px;
  --fs-2xl:48px;
  --fs-3xl:64px;

  /* ---- 字重 ---- */
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;

  /* ---- 行高 ---- */
  --lh-tight:1.25;
  --lh-snug:1.45;
  --lh-base:1.7;
  --lh-loose:1.95;

  /* ---- 字距 ---- */
  --ls-tight:-0.01em;
  --ls-normal:0;
  --ls-wide:0.08em;
  --ls-wider:0.12em;
  --ls-widest:0.2em;

  /* ---- 间距阶梯（8 的倍数） ---- */
  --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;

  /* ---- 布局 ---- */
  --container:1280px;
  --container-pad:24px;
  --nav-h:64px;
  --promo-h:34px;

  /* ---- 动效 ---- */
  --dur-fast:.2s;
  --dur-base:.3s;
  --dur-slow:.6s;
  --dur-hero:1s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ---- 层级 ---- */
  --z-nav:80;
  --z-drawer:120;
  --z-toast:200;
  --z-modal:300;
}

/* ---- 断点（供参考，媒体查询里直接用数值） ----
   max: 480px, 768px, 1024px
   移动优先的断点取 480 / 768 / 1024 / 1280
   ------------------------------------------------ */