/* =========================================================================
   theme.css —— 【换皮处 1】颜色 / 圆角 / 阴影 / 字体
   -------------------------------------------------------------------------
   方向：潮玩陈列柜 × 手游质感。

   为什么从「纯色卡片」升级成现在这套：
     上一版所有内容都是「白卡 + 白卡 + 白卡」竖着堆，间距一致、圆角一致、
     没有形状也没有色块，所以整体读起来很板正。潮玩品牌（泡泡玛特这类）
     和主流手游的页面靠三件事立住：
       1. 大色块分区 —— 用饱和色块把页面切成几段，而不是一张张白卡
       2. 形状参与设计 —— 圆、弧、胶囊、贴纸标签，不是清一色矩形
       3. 稀有度金属框 —— 卡牌必须有框，框的颜色本身就是信息

   渐变的使用边界（依然保留这条铁律）：
     · 材质光泽：搪胶高光、亚克力、虚粒、金属卡框
     · UI 立体感：按钮的顶高光 + 底部实心投影
     不做「装饰性渐变背景」—— 那是廉价感的主要来源。
   ========================================================================= */
:root {
  /* ---- 底：明亮纯色。商品要在浅底上跳出来 ---- */
  --paper:   #F7F3ED;
  --paper-2: #F0EAE0;
  --card:    #FFFFFF;
  --card-2:  #FCFAF6;
  --sunk:    #EDE6DA;   /* 内凹面（进度槽、输入框） */

  /* ---- 墨：近黑带蓝，不用纯黑 ----
     ⚠️ 这三个值是按**对比度**定的，不是凭感觉挑的。实测（白卡 / 米底 --paper）：

       --ink   #1B2233   15.87 / 14.36   ✅
       --ink-2 #696F83    5.00 /  4.52   ✅ 过 AA 4.5
       --ink-3 #878C9C    3.35 /  3.03   ✅ 过 3.0（UI 元件线）

     改之前是 #6E7488 / #A8ADBD，在米底上只有 4.21 / **2.03** ——
     --ink-3 掉到 2.0，全站一百多处时间戳、单位词、「上限 9 张」
     「剩余 32 天」「手续费 5%」在手机户外基本读不出来。

     ⚠️ --ink-3 **不要**再去追 4.5 —— 算出来是 #6A6F7F，
     和 --ink-2 的 #696F83 几乎同色，三级层次会塌成两级。
     3:1 是 UI 元件的标准线，也是这一级该守的线。

     ⚠️ 这两个变量全站只用在 `color` 上（--ink-3 68 处、--ink-2 27 处），
     所以调它们**只会影响文字**，不会动到任何背景或边框。改完请重跑
     `_uiaudit.html` 复核。 */
  --ink:   #1B2233;
  --ink-2: #696F83;
  --ink-3: #878C9C;
  --line:  #E8E2D8;

  /* ---- 品牌：一主一辅 ---- */
  --brand:    #FF4D8D;   /* 粉 —— 主色（抽盒、CTA、选中态） */
  --brand-d:  #E63A78;   /* 粉的暗阶 */
  --brand-l:  #FFE4EF;   /* 粉的极浅底，铺大面积块用 */
  --contra:   #1B2A4A;   /* 藏青 —— 互补色（强调块、深色卡） */
  --contra-d: #101A31;
  --contra-l: #E5EAF4;

  /* ---- 辅助色：稀有度 / 分类 / 装饰形状 ---- */
  --blue:    #3B9EFF;
  --mint:    #10CFAE;
  --lime:    #9EDB2E;
  --orange:  #FF8A3D;
  --yellow:  #FFC93C;
  --purple:  #8B5CF6;
  --violet:  #6D4AFF;

  /* ---- 稀有度：每档三阶（高光 / 主色 / 暗阶）
     卡框、稀有度芯片、翻牌光效全部读这三个值，加一档只需在这里加一组 ---- */
  --rar-normal-1: #D5DAE4;  --rar-normal-2: #9AA0AE;  --rar-normal-3: #6F7686;
  --rar-rare-1:   #8FCBFF;  --rar-rare-2:   #3B9EFF;  --rar-rare-3:   #1D6ED6;
  --rar-epic-1:   #C0A6FF;  --rar-epic-2:   #8B5CF6;  --rar-epic-3:   #6534D4;
  --rar-legend-1: #FFE08A;  --rar-legend-2: #FFA724;  --rar-legend-3: #DD6F06;

  /* ---- 圆角：比上一版更大，形状是「设计感」的一半 ---- */
  --r-xs: 10px;  --r-sm: 14px;  --r-md: 20px;
  --r-lg: 26px;  --r-xl: 34px;  --r-2xl: 42px;  --r-full: 999px;

  /* ---- 阴影 ---- */
  --sh-soft: 0 2px 8px rgba(27,34,51,.05), 0 12px 28px rgba(27,34,51,.07);
  --sh-tap:  0 1px 3px rgba(27,34,51,.10);
  --sh-lift: 0 6px 18px rgba(27,34,51,.10), 0 2px 5px rgba(27,34,51,.06);
  /* 硬投影：按钮和贴纸的「厚度」，按下时压缩 */
  --sh-pop:  0 4px 0 var(--contra);
  --sh-shelf: inset 0 -14px 24px -14px rgba(27,34,51,.10);
  /* 发光：只给主 CTA 和传说卡，滥用会变廉价 */
  --sh-glow-brand:  0 10px 24px -8px rgba(255,77,141,.65);
  --sh-glow-legend: 0 10px 26px -8px rgba(255,167,36,.70);

  /* ---- 间距 ---- */
  --pad: 20px;
  --gap: 14px;

  /* ---- 布局 ---- */
  --tabbar-h: 66px;
  --app-max:  430px;

  /* ---- 字体：粗壮 + 圆角 ---- */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
          "Microsoft YaHei UI", "Microsoft YaHei",
          -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-num: "DIN Alternate", "SF Pro Display", "Helvetica Neue",
              -apple-system, Arial, sans-serif;
}