/*! 设计 token —— 达人报价库（bjd.rjms.site）
 *
 * ⚠ 本文件由 tools/ui-tokens/build-tokens.mjs 依据【真实用量统计】生成。
 *   改值请改生成器里的色板/阶梯定义，然后重跑：npm run tokens:build
 *
 * 三条原则：
 *   1. 每个 token 的值 == 被它替换掉的那个字面值（逐字节相同）。
 *      所以引入 token 不改变任何视觉结果，可用 npm run tokens:verify 校验。
 *   2. 单位一律沿用原单位。根字号是 clamp(13px, 3.85vw, 17px) 的流式值，
 *      把 rem 换算成 px 会破坏移动端等比缩放 —— 这里一律保留 rem。
 *   3. 阶梯 = 真实出现 ≥2 次的值；只出现 1 次的一次性特例保留原值，
 *      清单见 static/tokens.md 的「遗留」一节。
 *
 * 命名：--space-50 = .5rem（数字 = rem×100）；--space-px-13 = 13px；
 *       --leading-150 = 行高 1.5；--tracking-neg20 = -.02em。
 */

:root {

/* ═══════════ 0. 中性色阶（亮→暗，取自项目真实在用的灰）12 阶 ═══════════ */
  --color-neutral-0: #ffffff;                   /* 纯白 */
  --color-neutral-50: #f7f8fa;                  /* 浅面板底 */
  --color-neutral-100: #eef0f6;                 /* 页面底色（亮色主题） */
  --color-neutral-200: #e9eaee;                 /* 正文（detail-preview 暗色） */
  --color-neutral-300: #b9bcc6;                 /* 次要文字（detail-preview 暗色） */
  --color-neutral-400: #838a99;                 /* 弱化文字（暗色主题） */
  --color-neutral-500: #767e8e;                 /* 弱化文字（亮色主题） */
  --color-neutral-600: #3f4553;                 /* 次要文字（亮色主题） */
  --color-neutral-700: #2a2b30;                 /* 抖音黑（暗色） */
  --color-neutral-800: #21222a;                 /* 深面板/遮罩 */
  --color-neutral-900: #16181f;                 /* 正文（亮色主题） */
  --color-neutral-950: #0d0d12;                 /* 页面底色（暗色主题） */

/* ═══════════ 1. 品牌 / 状态 / 平台色 ═══════════ */
  --color-brand-deeper: #e04f00;                /* 品牌橙·最深 */
  --color-brand-deep: #d95400;                  /* 品牌橙·深（= 现有 --brand-ink） */
  --color-brand: #ff6a00;                       /* 品牌橙（= 现有 --brand） */
  --color-brand-soft: #ff8a2b;                  /* 品牌橙·浅 */
  --color-brand-softer: #ff9b52;                /* 品牌橙·更浅 */
  --color-brand-softest: #ffb066;               /* 品牌橙·最浅 */
  --color-success-deep: #047857;                /* 成功·深 */
  --color-success: #059669;                     /* 成功 */
  --color-success-bright: #10b981;              /* 成功·亮 */
  --color-success-soft: #34d399;                /* 成功·浅 */
  --color-success-softer: #6ee7b7;              /* 成功·更浅 */
  --color-warning: #b45309;                     /* 警告 */
  --color-warning-bright: #fbbf24;              /* 警告·亮 */
  --color-danger-deep: #b42318;                 /* 危险·深 */
  --color-danger-strong: #c0392b;               /* 危险·强 */
  --color-danger: #e5484d;                      /* 危险 */
  --color-danger-bright: #ff3b30;               /* 危险·亮 */
  --color-danger-soft: #f87171;                 /* 危险·浅 */
  --color-danger-softer: #fca5a5;               /* 危险·更浅 */
  --color-info: #3b82f6;                        /* 信息 */
  --color-info-deep: #2563eb;                   /* 信息·深 */
  --color-platform-douyin: #17181a;             /* 抖音黑（= 现有 --dy 亮色） */
  --color-platform-douyin-dark: #2a2b30;        /* 抖音黑（= 现有 --dy 暗色） */
  --color-platform-xhs: #ff2442;                /* 小红书红（= 现有 --xhs 亮色） */
  --color-platform-xhs-dark: #ff3b57;           /* 小红书红（= 现有 --xhs 暗色） */

/* ═══════════ 2. 透明叠加层（同一基色只变 alpha；α 后缀 = alpha×100） ═══════════ */
  --color-danger-a07: rgba(229,72,77,.07);      /* 危险 α0.07 */
  --color-danger-a08: rgba(229, 72, 77, .08);   /* 危险 α0.08 */
  --color-danger-a10: rgba(229, 72, 77, .10);   /* 危险 α0.1 */
  --color-danger-a13: rgba(229,72,77,.13);      /* 危险 α0.13 */
  --color-danger-a16: rgba(229,72,77,.16);      /* 危险 α0.16 */
  --color-danger-a30: rgba(229, 72, 77, .3);    /* 危险 α0.3 */
  --color-danger-a45: rgba(229, 72, 77, .45);   /* 危险 α0.45 */
  --color-brand-a10: rgba(255, 122, 26, .10);   /* 品牌橙 α0.1 */
  --color-brand-a12: rgba(255, 122, 26, .12);   /* 品牌橙 α0.12 */
  --color-brand-a16: rgba(255,122,26,.16);      /* 品牌橙 α0.16 */
  --color-brand-a18: rgba(255, 122, 26, .18);   /* 品牌橙 α0.18 */
  --color-brand-a22: rgba(255,122,26,.22);      /* 品牌橙 α0.22 */
  --color-brand-a35: rgba(255, 122, 26, .35);   /* 品牌橙 α0.35 */
  --color-brand-a40: rgba(255, 122, 26, .4);    /* 品牌橙 α0.4 */
  --color-brand-a45: rgba(255, 122, 26, .45);   /* 品牌橙 α0.45 */
  --color-brand-a50: rgba(255, 122, 26, .5);    /* 品牌橙 α0.5 */
  --color-scrim-cool-a11: rgba(140, 146, 160, .11);/* 中性叠加（冷灰） α0.11 */
  --color-scrim-cool-a16: rgba(140, 146, 160, .16);/* 中性叠加（冷灰） α0.16 */
  --color-scrim-cool-a18: rgba(140, 146, 160, .18);/* 中性叠加（冷灰） α0.18 */
  --color-white-a02: rgba(255,255,255,.02);     /* 白色叠加 α0.02 */
  --color-white-a08: rgba(255, 255, 255, .08);  /* 白色叠加 α0.08 */
  --color-white-a35: rgba(255, 255, 255, .35);  /* 白色叠加 α0.35 */
  --color-white-a50: rgba(255, 255, 255, .5);   /* 白色叠加 α0.5 */
  --color-scrim-a04: rgba(127,127,127,.04);     /* 中性叠加（灰） α0.04 */
  --color-scrim-a05: rgba(127,127,127,.05);     /* 中性叠加（灰） α0.05 */
  --color-scrim-a06: rgba(127,127,127,.06);     /* 中性叠加（灰） α0.06 */
  --color-scrim-a07: rgba(127,127,127,.07);     /* 中性叠加（灰） α0.07 */
  --color-scrim-a09: rgba(127,127,127,.09);     /* 中性叠加（灰） α0.09 */
  --color-scrim-a14: rgba(127,127,127,.14);     /* 中性叠加（灰） α0.14 */
  --color-scrim-a16: rgba(127,127,127,.16);     /* 中性叠加（灰） α0.16 */
  --color-ink-scrim-a06: rgba(20, 22, 30, .06); /* 墨色叠加 α0.06 */
  --color-ink-scrim-a30: rgba(20, 22, 30, .3);  /* 墨色叠加 α0.3 */
  --color-brand-deep-a24: rgba(224, 79, 0, .24);/* 品牌橙·深 α0.24 */
  --color-brand-deep-a26: rgba(224,79,0,.26);   /* 品牌橙·深 α0.26 */
  --color-brand-deep-a28: rgba(224, 79, 0, .28);/* 品牌橙·深 α0.28 */
  --color-brand-deep-a30: rgba(224, 79, 0, .30);/* 品牌橙·深 α0.3 */
  --color-success-a13: rgba(16, 185, 129, .13); /* 成功 α0.13 */
  --color-success-a14: rgba(16, 185, 129, .14); /* 成功 α0.14 */
  --color-success-a16: rgba(16,185,129,.16);    /* 成功 α0.16 */
  --color-success-a22: rgba(16, 185, 129, .22); /* 成功 α0.22 */
  --color-success-a30: rgba(16, 185, 129, .3);  /* 成功 α0.3 */
  --color-brand-soft-a13: rgba(255,138,43,.13); /* 品牌橙·浅 α0.13 */
  --color-brand-soft-a18: rgba(255,138,43,.18); /* 品牌橙·浅 α0.18 */
  --color-brand-soft-a35: rgba(255, 138, 43, .35);/* 品牌橙·浅 α0.35 */
  --color-black-a50: rgba(0, 0, 0, .5);         /* 黑色叠加 α0.5 */
  --color-black-a60: rgba(0,0,0,.6);            /* 黑色叠加 α0.6 */

/* ═══════════ 3. 语义别名（写给新代码用；值指向上面的色板） ═══════════ */
  --color-text: var(--color-neutral-900);       /* 正文 */
  --color-text-secondary: var(--color-neutral-600);/* 次要文字 */
  --color-text-muted: var(--color-neutral-500); /* 弱化文字 */
  --color-text-inverse: var(--color-neutral-0); /* 反色文字 */
  --color-surface: var(--color-neutral-0);      /* 卡片/面板底 */
  --color-surface-subtle: var(--color-neutral-50);/* 次级面板底 */
  --color-page: var(--color-neutral-100);       /* 页面底色 */
  --color-border: rgba(30, 33, 45, .09);        /* 描边（= 现有 --hairline） */

/* ═══════════ 4. 字体栈 ═══════════ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "HarmonyOS Sans SC", "Inter", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* 中文优先正文栈 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 等宽（金额/编号） */

/* ═══════════ 5. 字重 ═══════════ */
  --weight-500: 500;            /* 2 处 */
  --weight-550: 550;            /* 2 处 */
  --weight-600: 600;            /* 20 处 */
  --weight-650: 650;            /* 43 处 */
  --weight-700: 700;            /* 30 处 */
  --weight-750: 750;            /* 4 处 */
  --weight-770: 770;            /* 2 处 */
  --weight-780: 780;            /* 2 处 */

  /* 语义别名 */
  --weight-regular: 400;              /* 正文 */
  --weight-medium: var(--weight-500); /* 强调 = 500 */
  --weight-semibold: var(--weight-600);/* 小标题 = 600 */
  --weight-bold: var(--weight-700);   /* 标题 = 700 */

/* ═══════════ 6. 字号阶梯（.NN rem；数字 = rem×100） ═══════════ */
  /* ⚠ 实测本项目有 60 个不同字号（0.02rem 粒度），阶梯天然很密。
     这里没有合并任何相邻值 —— 合并 = 改视觉，违反等价重构。
     想把阶梯收窄，是一次独立的设计决策，见 tokens.md「发现的问题」。 */
  --text-px-11: 11px;           /* 5 处 */
  --text-px-11-5: 11.5px;       /* 8 处 */
  --text-px-12: 12px;           /* 3 处 */
  --text-px-12-5: 12.5px;       /* 13 处 */
  --text-px-13: 13px;           /* 5 处 */
  --text-px-17: 17px;           /* 3 处 */
  --text-px-19: 19px;           /* 2 处 */
  --text-62: .62rem;            /* 5 处 */
  --text-64: .64rem;            /* 4 处 */
  --text-66: .66rem;            /* 3 处 */
  --text-68: .68rem;            /* 11 处 */
  --text-70: .7rem;             /* 12 处 */
  --text-72: .72rem;            /* 20 处 */
  --text-74: .74rem;            /* 16 处 */
  --text-75: .75rem;            /* 6 处 */
  --text-76: .76rem;            /* 15 处 */
  --text-77: .77rem;            /* 2 处 */
  --text-78: .78rem;            /* 34 处 */
  --text-79: .79rem;            /* 2 处 */
  --text-80: .8rem;             /* 17 处 */
  --text-82: .82rem;            /* 7 处 */
  --text-83: .83rem;            /* 2 处 */
  --text-84: .84rem;            /* 23 处 */
  --text-85: .85rem;            /* 4 处 */
  --text-86: .86rem;            /* 8 处 */
  --text-88: .88rem;            /* 4 处 */
  --text-90: .9rem;             /* 3 处 */
  --text-92: .92rem;            /* 4 处 */
  --text-95: .95rem;            /* 3 处 */
  --text-100: 1rem;             /* 7 处 */
  --text-101: 1.01rem;          /* 4 处 */
  --text-126: 1.26rem;          /* 2 处 */

/* ═══════════ 7. 行高阶梯 ═══════════ */
  --leading-100: 1;             /* 4 处 */
  --leading-110: 1.1;           /* 2 处 */
  --leading-125: 1.25;          /* 2 处 */
  --leading-145: 1.45;          /* 3 处 */
  --leading-150: 1.5;           /* 7 处 */
  --leading-155: 1.55;          /* 5 处 */
  --leading-160: 1.6;           /* 6 处 */
  --leading-165: 1.65;          /* 2 处 */
  --leading-170: 1.7;           /* 3 处 */

  /* 语义别名：正文档位 */
  --leading-body: var(--leading-150);     /* 正文 1.5 */
  --leading-tight: var(--leading-125);    /* 紧凑 1.25 */

/* ═══════════ 8. 字距阶梯（数字 = em×1000；neg = 负值） ═══════════ */
  --tracking-neg30: -.03em;     /* 5 处 */
  --tracking-neg25: -.025em;    /* 4 处 */
  --tracking-neg20: -.02em;     /* 9 处 */
  --tracking-neg10: -.01em;     /* 4 处 */
  --tracking-20: .02em;         /* 4 处 */
  --tracking-40: .04em;         /* 5 处 */

/* ═══════════ 9. 间距阶梯（.NN rem；数字 = rem×100；-px-NN 是 px 值） ═══════════ */
  /* ⚠ 本项目真实栅格是 0.05rem（≈0.8px @16px 根字号），不是 4px 绝对栅格：
     根字号是流式 clamp()，绝对 px 栅格在这里没有意义，强行吸附会改视觉。
     px 值来自 detail-preview.html —— 那个页面不参与流式缩放。 */
  --space-px-2: 2px;            /* 3 处 */
  --space-px-3: 3px;            /* 2 处 */
  --space-px-4: 4px;            /* 2 处 */
  --space-px-5: 5px;            /* 3 处 */
  --space-px-6: 6px;            /* 5 处 */
  --space-px-7: 7px;            /* 6 处 */
  --space-px-8: 8px;            /* 7 处 */
  --space-px-9: 9px;            /* 6 处 */
  --space-px-10: 10px;          /* 9 处 */
  --space-px-11: 11px;          /* 6 处 */
  --space-px-12: 12px;          /* 8 处 */
  --space-px-13: 13px;          /* 16 处 */
  --space-px-14: 14px;          /* 13 处 */
  --space-px-15: 15px;          /* 9 处 */
  --space-px-16: 16px;          /* 5 处 */
  --space-px-17: 17px;          /* 3 处 */
  --space-px-18: 18px;          /* 2 处 */
  --space-px-22: 22px;          /* 2 处 */
  --space-px-26: 26px;          /* 2 处 */
  --space-neg72: -.72rem;       /* 2 处 */
  --space-neg20: -.2rem;        /* 2 处 */
  --space-10: .1rem;            /* 26 处 */
  --space-12: .12rem;           /* 4 处 */
  --space-15: .15rem;           /* 3 处 */
  --space-16: .16rem;           /* 6 处 */
  --space-18: .18rem;           /* 9 处 */
  --space-20: .2rem;            /* 16 处 */
  --space-22: .22rem;           /* 8 处 */
  --space-24: .24rem;           /* 7 处 */
  --space-25: .25rem;           /* 4 处 */
  --space-26: .26rem;           /* 5 处 */
  --space-27: .27rem;           /* 2 处 */
  --space-28: .28rem;           /* 5 处 */
  --space-30: .3rem;            /* 44 处 */
  --space-32: .32rem;           /* 3 处 */
  --space-34: .34rem;           /* 11 处 */
  --space-35: .35rem;           /* 28 处 */
  --space-38: .38rem;           /* 9 处 */
  --space-40: .4rem;            /* 33 处 */
  --space-42: .42rem;           /* 15 处 */
  --space-45: .45rem;           /* 30 处 */
  --space-46: .46rem;           /* 2 处 */
  --space-48: .48rem;           /* 2 处 */
  --space-50: .5rem;            /* 72 处 */
  --space-52: .52rem;           /* 2 处 */
  --space-55: .55rem;           /* 33 处 */
  --space-58: .58rem;           /* 3 处 */
  --space-60: .6rem;            /* 55 处 */
  --space-62: .62rem;           /* 9 处 */
  --space-65: .65rem;           /* 8 处 */
  --space-68: .68rem;           /* 6 处 */
  --space-70: .7rem;            /* 43 处 */
  --space-72: .72rem;           /* 7 处 */
  --space-75: .75rem;           /* 14 处 */
  --space-80: .8rem;            /* 27 处 */
  --space-85: .85rem;           /* 20 处 */
  --space-90: .9rem;            /* 25 处 */
  --space-95: .95rem;           /* 9 处 */
  --space-100: 1rem;            /* 48 处 */
  --space-110: 1.1rem;          /* 10 处 */
  --space-115: 1.15rem;         /* 3 处 */
  --space-120: 1.2rem;          /* 10 处 */
  --space-130: 1.3rem;          /* 8 处 */
  --space-140: 1.4rem;          /* 5 处 */
  --space-150: 1.5rem;          /* 3 处 */
  --space-160: 1.6rem;          /* 4 处 */
  --space-200: 2rem;            /* 2 处 */
  --space-220: 2.2rem;          /* 5 处 */
  --space-240: 2.4rem;          /* 3 处 */
  --space-260: 2.6rem;          /* 2 处 */
  --space-300: 3rem;            /* 4 处 */
  --space-400: 4rem;            /* 3 处 */
  --space-460: 4.6rem;          /* 2 处 */

  /* 语义别名：最常用的几个角色 */
  --space-inline: var(--space-50);        /* 行内元素间距 = .5rem */
  --space-block: var(--space-100);        /* 段落间距 = 1rem */
  --space-section: var(--space-120);      /* 区块间距 = 1.2rem */

/* ═══════════ 10. 圆角阶梯 ═══════════ */
  --radius-50pct: 50%;          /* 14 处 */
  --radius-px-11: 11px;         /* 2 处 */
  --radius-px-12: 12px;         /* 2 处 */
  --radius-px-13: 13px;         /* 2 处 */
  --radius-px-99: 99px;         /* 5 处 */
  --radius-px-999: 999px;       /* 8 处 */
  --radius-28: .28rem;          /* 2 处 */
  --radius-30: .3rem;           /* 3 处 */
  --radius-45: .45rem;          /* 6 处 */
  --radius-50: .5rem;           /* 3 处 */
  --radius-55: .55rem;          /* 8 处 */
  --radius-60: .6rem;           /* 6 处 */
  --radius-70: .7rem;           /* 8 处 */

  /* 语义别名 */
  --radius-sm: var(--radius-30);      /* 小 = .3rem */
  --radius-md: var(--radius-45);      /* 中 = .45rem */
  --radius-lg: var(--radius-60);      /* 大 = .6rem */
  --radius-xl: var(--radius-70);      /* 卡片 = .7rem */
  --radius-pill: var(--radius-px-99); /* 胶囊 = 99px */
  --radius-full: var(--radius-px-999);/* 全圆 = 999px */

/* ═══════════ 11. 边框宽度 ═══════════ */
  --border-w-1px: 1px;          /* 114 处 */
  --border-w-2px: 2px;          /* 8 处 */
  --border-w-3px: 3px;          /* 3 处 */

  --border-hair: 1px;           /* 语义别名：发丝线（全站主体） */

/* ═══════════ 12. 阴影 ═══════════ */
  --shadow-inset-rim: inset 0 1px 0 var(--glass-rim-top);
  /* 玻璃高光内描边（全站最常用，8 处） */
  --shadow-scrim-lg: 0 24px 64px rgba(20, 22, 30, .3);
  /* 深色遮罩投影 */
  --shadow-pop-brand: 0 6px 16px rgba(224,79,0,.26), inset 0 1px 0 rgba(255,255,255,.35);
  /* 橙色按钮投影 */
  --shadow-none: none;
  /* 无阴影 */
  /* 本项目实测 40 个不同 box-shadow 值，绝大多数只出现 1 次，
     按「一次性特例」规则保留原值，见 tokens.md 遗留清单。 */

/* ═══════════ 13. 动效 ═══════════ */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* 数字等宽：金额、粉丝数、配额这类地方用，避免数字宽度跳动 */
.tabular-nums { font-variant-numeric: tabular-nums; }