/* ============================================================
   skins/luxe.css —— 「高级质感风」（默认皮肤）
   ------------------------------------------------------------
   分工（重要，别越界）：
     · 配色  --main / --card / --ink / --ck1  ← 由 card.js 的 applyTheme() 写，
       8 套主题色各自覆盖，本文件**不准**碰。
     · 质感  --radius* / --shadow-* / --font-* / --panel-* / --accent  ← 本文件负责。
   所以 8 色 × 2 皮肤 = 16 种搭配，全靠 CSS 变量正交组合，没有任何 JS 分支。

   为什么 luxe 的令牌写在 :root 而不是 html[data-skin="luxe"]：
   老贺卡、JS 没跑起来、或 hand.css 没加载时，都应该是 luxe 的样子 —— 让它当兜底。
   hand.css 用 html[data-skin="hand"] 覆盖，特异性更高，和引入顺序无关。

   下面凡是以 `html[data-skin="luxe"], [data-skin="luxe"]` 成组出现的规则，
   都用 [data-skin=...] 这半边来支持「制作页的风格选择卡」就地预览
   —— 那儿的 <html> 上没有 data-skin，属性挂在小卡片自己身上。

   兼容性约定：color-mix() 需要 Chrome 111+ / Safari 16.2+。
   微信内置浏览器版本跨度大，所以凡是用 color-mix 的地方，
   都先写一条纯色的普通声明垫底，再用 color-mix 覆盖 —— 不支持时只是少一点微妙，
   不会整条声明失效（这是 card.html 里既有的写法，保持一致）。
   ============================================================ */

:root {
  /* ---- 圆角：收敛一点，方正显贵 ---- */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 8px;

  /* ---- 字体：零下载的系统衬线栈（中文衬线在各平台都有，不用等字体文件） ---- */
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---- 面板：玻璃拟态 ---- */
  --panel-bg: rgba(255, 255, 255, .12);
  --panel-bg: color-mix(in srgb, var(--card, #fff) 14%, transparent);
  --panel-brd: rgba(255, 255, 255, .24);
  --panel-shadow: var(--shadow-2);
  --panel-blur: saturate(1.15) blur(14px);
  /* 面板上的字色必须跟着面板材质走：玻璃面板是半透明的，配白字；
     手工风是不透明白纸，白字会直接糊掉（见 hand.css 的 --panel-ink） */
  /* 但玻璃面板是「主题色 + 14% 白」，底色仍然是主题色 —— 所以这里的"白字"
     其实是压在主题色上的字，得跟 --on-main 一起变，否则「奶油黄 + 高级质感」
     的面板标题会糊在金色底上（同 card.css 顶部那条注释）。 */
  --panel-ink: var(--on-main, #fff);

  /* ---- 点缀金：和主题色混一点，保证在「奶油黄」这类浅色主题上也不刺眼 ---- */
  --accent: #c9a24a;
  --accent: color-mix(in srgb, var(--main, #e75480) 30%, #c9a24a);
  --accent-soft: rgba(201, 162, 74, .28);

  /* ---- 阴影：都是大扩散、低不透明度的柔影，避免"贴纸感" ----
     --shadow-1 已删：全项目没人引用它（card.css / card.js 里一次 var(--shadow-1) 都没有）。
     "三级阴影"听着整齐，但只留真正在用的两级，比留一个装饰性的令牌诚实。 */
  --shadow-2: 0 10px 28px -8px rgba(0, 0, 0, .28);
  --shadow-3: 0 28px 64px -20px rgba(0, 0, 0, .42);

  /* ---- 信纸边：金色发丝线。信纸本身仍是纸（长信要读），
     但边上一道金线就把"这张纸是精心做的"说清楚了 ---- */
  --letter-brd: rgba(201, 162, 74, .40);
  --letter-brd: color-mix(in srgb, var(--accent) 40%, transparent);

  /* ---- 背景层：顶部高光 + 底部暗角，给纯色背景加体积感 ---- */
  --bg-image:
    radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, .16), transparent 62%),
    radial-gradient(120% 60% at 50% 100%, rgba(0, 0, 0, .16), transparent 68%);

  /* ---- 封面/照片的描边：1px 内发丝线，是「贵」最省力的信号 ----
     原来是 accent 45% 的纯金线。八套主题各算一遍它与底色的对比度才看清：
     最差 1.03:1、均值 1.21:1 —— 金线贴着彩色底，**八套主题上基本都是隐形的**
     （深红主题上看着"有道光"，那其实是照片的衬底，不是这条线）。
     改成 84% 白 + 16% 点缀金：白占比 74% 时最差 1.55:1，84% 时 1.68:1、均值 3.70:1，
     再往上（92%）只多 0.1 却把金色的暖调冲没了，84% 是这条曲线的拐点。
     留一点 accent 而不是纯白，是想让这道线仍然属于当前主题色，而不是通用白线。 */
  --frame-brd: rgba(255, 255, 255, .46);
  --frame-brd: color-mix(in srgb, #ffffff 84%, var(--accent));

  /* ---- 开箱礼物盒：上亮下暗的玻璃盒 + 描金缎带 ----
     gift-1/2 一个提亮一个压暗（不是两个都半透明白），盒身才有立体感 */
  --gift-1: rgba(255, 255, 255, .34);
  --gift-2: rgba(0, 0, 0, .17);
  --gift-edge: rgba(255, 255, 255, .42);
  --gift-band: var(--accent);
  --gift-band-2: #f2e0ae;          /* 缎子中间的高光：淡金，不用半透明白（会发灰） */
  --gift-radius: 8px;
  --gift-radius-lid: 10px;
  --gift-halo: rgba(201, 162, 74, .34);

  /* ---- 彩带：香槟金 / 米白，不用彩虹色 —— 彩虹色一眼"儿童派对" ---- */
  --confetti-1: #e8cd86;
  --confetti-2: #c9a24a;
  --confetti-3: #f6e7b8;
  --confetti-4: #fdf3dc;   /* 不用纯白：在彩色背景上纯白纸片看着像噪点 */
  --confetti-5: #b98b3a;

  /* ---- 结尾烟花：比彩带亮一档。
     纸片是贴在背景上的，深金看得见；火星是暗底上的发光点，
     同样的 #c9a24a 到了深红背景上就糊没了 —— 这一组是"光的颜色"，不是"纸的颜色" ---- */
  --fw-1: #fff6dd;
  --fw-2: #ffe08a;
  --fw-3: #ffc94d;
  --fw-4: #ffffff;
  --fw-5: #f4b942;
}

/* ---- 衬线标题：只在 luxe 下生效（hand 皮肤会把 --font-display 换成娃娃体） ---- */
html[data-skin="luxe"] .hand,
html[data-skin="luxe"] h1,
[data-skin="luxe"] .hand {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .06em;
}

/* ---- 登录封面标题：衬线 + 拉开字距，标题更"贵" ----
   注意：.gate-box 本身是透明 flex 容器（card.html:83 没有 background），
   所以这里**不能**给它加 box-shadow —— 那会画出一个"没有卡片的卡片影子"。
   玻璃面板要等 Phase 2 连同 background/border/padding 一起做。 */
html[data-skin="luxe"] .gate-box h1 {
  letter-spacing: .22em;                 /* 衬线 + 拉开字距，标题更"贵" */
  text-indent: .22em;                    /* 抵消末字后多出的字距，保持视觉居中 */
}

/* ---- 封面金线框：1px 内描边，是「贵」最省力的信号 ----
   用 ::after 画在 #hero 里、z-index 2（粒子之上、礼物盒之下），
   不改 DOM、不影响导出内联。手工风没有这条规则，自然就不画。 */
html[data-skin="luxe"] #hero::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid var(--frame-brd, rgba(255, 255, 255, .2));
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
}

/* ---- 照片：悬浮的玻璃片 ----
   这是和手工风拉开距离的主要一处。手工风是厚白相纸 + 歪着贴，
   luxe 反过来：不要白框，只留一圈金色发丝线 + 一道大扩散柔影，
   照片看着像浮在背景上而不是嵌在纸里。
   阴影比 --shadow-2 更沉，是因为这里要的是"离开背景一段距离"的错觉。 */
html[data-skin="luxe"] .pimg {
  border-color: var(--frame-brd);
  padding: 9px;
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .55);
}