/* ==========================================================================
   皇廷集团微信小程序 · 设计令牌 (Design Tokens)
   --------------------------------------------------------------------------
   视觉基线来自客户确认的一级页面 UI：
     · 皇冠金标 + 深蓝渐变通栏头图
     · 奶油金渐变徽章式图标
     · 金色为价值色（价格、权益、强调），红色只留给逾期与危险
   令牌名保持不变，页面层无需改动即可整体换肤。
   ========================================================================== */

/* --- 自托管字体：只打包宋体一套 -------------------------------------------
   只有宋体是「字体根本不在」，其余都只是风格差异，所以只自托管它。
   iOS 18.7 实测：--f-display 里的 Songti SC / STSong / Noto Serif SC /
   SimSun 四个名字全部不存在，所有案名与品牌标题一直悄悄退成苹方 ——
   这不是渲染问题，是字体压根没有。

   正文与数字退回系统字体。苹方与 DIN Alternate 同样是 Apple 独有，
   但各端都有质量说得过去的黑体与数字字形，为它们再背 510KB 不划算。
   代价是正文与数字的字面、字宽与折行在 iOS / 安卓 / Windows 上并不一致，
   这是明确取舍过的，不是遗漏。

   字重是变量轴 400–700，一个文件覆盖页面用到的 400/500/600/700 四档。
   font-display 用 swap：宋体到位前先用系统字排版。这一下跳字是有意选的 ——
   另一档 block 会让标题空白最长 3 秒；而字体走 immutable 长缓存，
   这一跳每位评审只会遇到一次。 */
@font-face {
  font-family: "HT Serif";
  src: url("../font/serif-sc.woff2?v=3fba0fc8") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* --- 深蓝 · 主色（页头、标签栏选中、主按钮） ------------------------- */
  --ink-900: #071834;
  --ink-800: #0B1F3F;
  --ink-700: #16305C;
  --ink-600: #1E3E72;
  --ink-500: #2A5490;
  --ink-400: #4A72AC;
  --ink-300: #8CA6CC;
  --ink-100: #E7EDF7;
  --ink-50:  #F3F6FB;

  /* --- 金 · 品牌与价值色 ------------------------------------------------ */
  --gold-800: #7A5E2E;
  --gold-700: #9C7940;
  --gold-600: #B8935A;
  --gold-500: #C9A063;   /* 主金 */
  --gold-400: #D4AF6A;
  --gold-300: #E2C68F;
  --gold-200: #EFDCB8;
  --gold-100: #F8EDD8;
  --gold-50:  #FDF8EE;

  /* --- 渐变 -------------------------------------------------------------- */
  /* 通栏页头：自上而下由深转亮，承接实景头图 */
  --grad-navy: linear-gradient(168deg, #071834 0%, #102A52 52%, #17376A 100%);
  --grad-navy-flat: linear-gradient(180deg, #0B1F3F 0%, #16305C 100%);
  /* 徽章底：奶油金，圆形快捷入口用 */
  --grad-medal: linear-gradient(158deg, #FDF7EA 0%, #F3E3C4 62%, #EAD5AC 100%);
  /* 实心金：主按钮、会员条 */
  --grad-gold: linear-gradient(135deg, #E0BE84 0%, #C9A063 52%, #B08945 100%);
  --grad-gold-soft: linear-gradient(135deg, #FBF1DE 0%, #F0DFBC 100%);
  /* 页头之上压的暗角，保证白字可读 */
  --grad-scrim: linear-gradient(180deg, rgba(7,24,52,.86) 0%, rgba(7,24,52,.34) 46%, rgba(7,24,52,.72) 100%);

  /* --- 印泥红 · 仅逾期、危险、未读角标 ---------------------------------- */
  --seal-600: #A8382E;
  --seal-500: #C7453A;
  --seal-300: #E89A93;
  --seal-100: #FBECEA;

  /* --- 语义色 ------------------------------------------------------------ */
  --jade-600: #226851;
  --jade-500: #2E7D64;
  --jade-100: #E3F1EC;
  --amber-600: #9A6810;
  --amber-500: #C2831A;
  --amber-100: #FBF0DA;
  --azure-500: #2563A8;
  --azure-100: #E4EEF9;

  /* --- 中性 -------------------------------------------------------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFAF7;   /* 微暖，配合金色不显冷 */
  --n-50:  #F4F5F7;   /* 页面底色 */
  --n-100: #E9EBEF;
  --n-200: #D8DCE3;
  --n-300: #BCC2CC;
  --n-400: #9AA1AD;
  --n-500: #79808D;
  --n-600: #5A616D;
  --n-700: #414852;
  --n-800: #2B313A;
  --n-900: #14181F;

  /* --- 蒙版 -------------------------------------------------------------- */
  --scrim-0:  rgba(7,24,52,0);
  --scrim-30: rgba(7,24,52,.30);
  --scrim-50: rgba(7,24,52,.50);
  --scrim-70: rgba(7,24,52,.70);
  --scrim-90: rgba(7,24,52,.90);

  /* --- 页面底色 ----------------------------------------------------------- */
  --bg-paper: var(--n-50);
  --bg-ink:   var(--ink-900);
  --bg-card:  var(--n-0);

  /* --- 文字 -------------------------------------------------------------- */
  --t-1: var(--n-900);
  --t-2: var(--n-700);
  --t-3: var(--n-500);
  --t-4: var(--n-400);
  --t-on-ink-1: #FFFFFF;
  --t-on-ink-2: rgba(255,255,255,.76);
  --t-on-ink-3: rgba(255,255,255,.52);
  --t-gold: var(--gold-600);

  /* --- 描边 -------------------------------------------------------------- */
  --line: #EDEFF3;
  --line-strong: var(--n-200);
  --line-gold: rgba(201,160,99,.34);
  --line-ink: rgba(255,255,255,.16);
  /* 深底之上的控件描边，比 --line-ink 重一档：
     --line-ink 是分隔线的重量，用在按钮轮廓上会虚得立不住 */
  --line-on-ink: rgba(255,255,255,.26);
  /* 深底之上的控件填充（页头的城市胶囊、圆形消息钮） */
  --fill-on-ink: rgba(255,255,255,.12);

  /* --- 字族 --------------------------------------------------------------
     display  宋体，案名与品牌标题        → HT Serif，自托管（Noto Serif SC 子集）
     body     黑体，界面主力              → 系统字体
     num      DIN，金额、面积、编号、倒计时 → 系统字体

     只有 display 自托管。它后面仍挂一串系统宋体名，是给两种情况兜底：
     字体文件整个加载失败，或改了文案没重跑 _subset.py、个别字不在子集里。
     这两种情况在 iOS 上都会一路落到 sans-serif（iOS 没有任何中文衬线体），
     那一处会变黑体 —— 可以接受，但别把它当常态。

     body 与 num 用系统字体是明确的取舍：这两类各端都有能看的字形，
     不值得为它们再背 510KB。代价是字面、字宽与折行跨端不一致。 */
  --f-display: "HT Serif", "Songti SC", "STSong", "Noto Serif SC", "SimSun",
               Georgia, serif;
  --f-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
            "Helvetica Neue", "Segoe UI", sans-serif;
  --f-num: "DIN Alternate", "Bahnschrift", "SF Pro Display", -apple-system,
           "Helvetica Neue", sans-serif;

  /* --- 字号 -------------------------------------------------------------- */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px;
  --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-34: 34px;

  /* --- 间距 -------------------------------------------------------------- */
  --s-2: 2px;  --s-4: 4px;   --s-6: 6px;   --s-8: 8px;
  --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px;

  /* --- 圆角（整体比上一版更圆润） ------------------------------------------ */
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px;
  --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-20: 20px; --r-24: 24px;
  --r-full: 999px;

  /* --- 投影 -------------------------------------------------------------- */
  --sh-1: 0 1px 3px rgba(11,31,63,.05);
  --sh-2: 0 3px 14px rgba(11,31,63,.07);
  --sh-3: 0 8px 28px rgba(11,31,63,.11);
  --sh-ink: 0 10px 30px rgba(7,24,52,.30);
  --sh-medal: 0 3px 10px rgba(184,147,90,.24);
  --sh-gold: 0 4px 14px rgba(184,147,90,.32);

  /* --- 手机外壳 ----------------------------------------------------------- */
  --ph-w: 375px;
  --ph-h: 812px;
  --statusbar-h: 44px;
  --navbar-h: 44px;
  --tabbar-h: 56px;
  --homebar-h: 22px;
  --actionbar-h: 56px;
}