/* ===========================================================================
 * 镜相 Jìngxiàng · Design Tokens（mirror-lite 本地化版）
 * ---------------------------------------------------------------------------
 * 来源：镜像 Demo `shared/tokens.js`（Tailwind theme.extend）+ `shared/styles.css`
 *      的 `:root` 变量段。数值**逐个抄过来，一个没改**。
 *
 * 为什么不直接搬 tokens.js：
 *   tokens.js 是喂给 `cdn.tailwindcss.com` 的运行时配置。mirror-lite 的 README
 *   红线 2 / "国内可达性" 第 2 条明写：境外 CDN 与 Google Fonts 在国内不可靠，
 *   Google Fonts 阻塞式加载会拖慢首屏甚至白屏。所以这里把同一套 token 编译成
 *   **纯 CSS 自定义属性**，零外部请求。
 *
 * 单一真相：改颜色只改这个文件。components.css / 页面里不许再出现十六进制色值。
 * 与 Demo 的对应关系见 public/DESIGN-TOKENS.md。
 * ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Base layer · 温白/奶白（snow → paper）------------------------- */
  --paper:        #FAFAF7;   /* 主背景：温白微暖，比纯白耐看 */
  --paper-bright: #FFFFFF;   /* 卡片 / 高亮 */
  --paper-warm:   #F5F1E8;   /* 投影层 */
  --paper-dim:    #EFECE4;   /* 分区块 / 次级背景 */
  --paper-edge:   #E4DFD3;   /* hairline 边线 */

  /* ---- Ink layer · 深墨骨架，替代 border 提供层次 -------------------- */
  --ink:       #1A1D29;      /* 主文字 / 重色 CTA */
  --ink-deep:  #0E1018;      /* 极深：标题 / 强调 */
  --ink-soft:  #3A3F4E;      /* 次要文字 */
  --ink-mute:  #6B7080;      /* 辅助文字 / 图标 mute */
  --ink-faint: #A0A4AE;      /* disabled / 提示 */

  /* ---- Mystic gold · 付费 / 授权码 / 神秘金 -------------------------- */
  --mystic:      #C5A358;
  --mystic-deep: #9A7E3E;
  --mystic-soft: #E8D8B0;
  --mystic-mist: #F5ECD8;

  /* ---- Rabbit blush · 情感暖色 -------------------------------------- */
  --rabbit:      #E9A9A9;
  --rabbit-deep: #C97979;
  --rabbit-soft: #F5D5D5;
  --rabbit-mist: #FBEDED;

  /* ---- Sage green · 免费量表 / 健康绿 ------------------------------- */
  --sage:      #7AA081;
  --sage-deep: #4F6B57;
  --sage-soft: #C8D8CC;
  --sage-mist: #EAF1EC;

  /* ---- 小红书渠道红 · 唯一的外来品牌色 --------------------------------
   * 破例加进来的一对值（2026-08-24 决定）。理由：全站唯一的站外购买入口
   * 指向小红书，用户必须一眼认出「这颗是去小红书」——温白/墨/金那套里
   * 没有任何一个值能承担这个识别任务。
   *
   * ⚠️ 使用范围**只有**「进入小红书商店」这一个按钮。它跟整套调子是冲突的，
   *    这种冲突是刻意的（渠道按钮就该跳出来）；一旦拿它去画别的东西，
   *    冲突就变成了噪音。别扩散。
   *
   * ⚠️ 与 --signal-error 是两件事：那个红是「出错了」，这个红是「去买」。
   *    同一屏里可能同时出现（核销失败 + 购买入口），所以两者不能混用。 */
  --xhs:      #FF2442;
  --xhs-deep: #D91832;
  --xhs-mist: #FFECEF;

  /* ---- Signal · 功能色 ---------------------------------------------- */
  --signal-success: #3D8F5C;
  --signal-warn:    #C88A2E;
  --signal-error:   #B5483D;
  --signal-info:    #3D7AAA;

  /* ---- 字体族 --------------------------------------------------------
   * 中文标题走 Noto Serif SC（宋体神秘感），英文标题 Cormorant Garamond。
   * ⚠️ 字体文件自托管在 /fonts/（见 public/fonts/README.md）。文件不在时
   *    浏览器静默回落到栈里的下一个族，页面不会白屏。                  */
  --font-display:  "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-headline: Manrope, "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-body:     Inter, "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 圆角 ---------------------------------------------------------- */
  --radius:      0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-full: 9999px;

  /* ---- 阴影 · 日相：柔和暖调，区别于夜相的 bloom -------------------- */
  --shadow-paper-sm: 0 1px 2px rgba(30,30,40,.04), 0 1px 1px rgba(30,30,40,.03);
  --shadow-paper:    0 4px 12px rgba(30,30,40,.06), 0 2px 4px rgba(30,30,40,.04);
  --shadow-paper-lg: 0 12px 32px rgba(30,30,40,.08), 0 4px 12px rgba(30,30,40,.05);
  --shadow-paper-xl: 0 24px 60px rgba(30,30,40,.12), 0 8px 20px rgba(30,30,40,.06);
  --shadow-ink:      0 4px 12px rgba(14,16,24,.14), 0 1px 3px rgba(14,16,24,.08);
  --shadow-gold-glow:   0 0 0 1px rgba(197,163,88,.35), 0 8px 24px rgba(197,163,88,.22);
  --shadow-rabbit-glow: 0 0 0 1px rgba(233,169,169,.40), 0 6px 20px rgba(233,169,169,.25);

  /* ---- 渐变 ---------------------------------------------------------- */
  --gradient-gold:   linear-gradient(135deg, #E8D8B0 0%, #C5A358 52%, #9A7E3E 100%);
  --gradient-ink:    linear-gradient(135deg, #1A1D29 0%, #0E1018 100%);
  --gradient-rabbit: linear-gradient(135deg, #F5D5D5 0%, #E9A9A9 52%, #C97979 100%);
  --gradient-sage:   linear-gradient(135deg, #C8D8CC 0%, #7AA081 52%, #4F6B57 100%);
  --gradient-xhs:    linear-gradient(135deg, #FF4D64 0%, var(--xhs) 52%, var(--xhs-deep) 100%);
  --paper-texture:
    radial-gradient(circle at 20% 10%, rgba(197,163,88,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(233,169,169,.04) 0%, transparent 50%);

  /* ---- 间距刻度（只保留页面真正用到的档位）-------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-18: 4.5rem; --space-22: 5.5rem;

  /* ---- 移动端基线（手册 v3.0 §4.4）---------------------------------- */
  --tap-min: 44px;                     /* Apple HIG 触控目标下限 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --shell-max: 34rem;                  /* 移动优先：正文栏宽上限 */
  --shell-wide: 64rem;                 /* 桌面端列表页栏宽上限 */
}

/* mirror-lite 只有免费/付费两档，把两个语义色收敛成一对别名，
 * 页面里写 var(--tier-free-*) 而不是 var(--sage-*)——将来换色不用翻页面。 */
:root {
  --tier-free:      var(--sage);
  --tier-free-mist: var(--sage-mist);
  --tier-free-deep: var(--sage-deep);
  --tier-paid:      var(--mystic);
  --tier-paid-mist: var(--mystic-mist);
  --tier-paid-deep: var(--mystic-deep);
}