/* ============================================================
   skins/hand.css —— 「温馨手工风」
   ------------------------------------------------------------
   只做一件事：把 luxe.css 在 :root 上定义的质感令牌，用更高特异性的
   html[data-skin="hand"] 覆盖掉。不动配色（配色永远归 applyTheme 管）。

   选择器写成 `html[data-skin="hand"], [data-skin="hand"]` 这一组，各有各的用处：
     · html[data-skin="hand"]  特异性(0,1,1) > luxe.css 的 :root(0,1,0)，
       所以两个文件谁先加载都无所谓，不靠顺序取胜。
     · [data-skin="hand"]      让「制作页的风格选择卡」也能带 data-skin 属性
       就地预览（制作页的 <html> 上没有 data-skin，只有预览那个小卡片上有）。
   ============================================================ */

html[data-skin="hand"],
[data-skin="hand"] {
  /* ---- 圆角：圆润一些，回到手作贴纸的手感 ---- */
  --radius: 20px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  /* ---- 字体：娃娃体当标题。下载版里这是子集化后的 woff2；
         真机若字体没到位，退到系统黑体也不会难看 ---- */
  --font-display: "ZCOOL KuaiLe", "PingFang SC", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---- 面板：不透明白纸 + 淡淡的白描边，像贴上去的相纸 ---- */
  --panel-bg: rgba(255, 255, 255, .94);
  --panel-brd: rgba(255, 255, 255, .70);
  --panel-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  --panel-blur: none;
  /* 白纸面板上必须用深字，否则白字直接糊没了（暖褐色，和信纸 .lettercard 一个调） */
  --panel-ink: #6b5340;

  /* ---- 点缀：暖金，比 luxe 更亮更暖 ---- */
  --accent: #e8b53a;
  --accent-soft: rgba(232, 181, 58, .30);

  /* ---- 阴影：暖调、更短更近，像纸片压在桌上 ----
     --shadow-1 已删：全项目没人引用它（card.css / card.js 里一次 var(--shadow-1) 都没有）。
     留着会让人以为"三级阴影"都在用，实际上只有 2 和 3 在起作用。 */
  --shadow-2: 0 8px 22px rgba(120, 70, 40, .18);
  --shadow-3: 0 18px 44px rgba(120, 70, 40, .24);

  /* ---- 信纸边：暖褐细边，像裁纸的毛边 ---- */
  --letter-brd: rgba(160, 118, 70, .28);

  /* ---- 背景层：暖光 + 纸纹 ----
     这里原先是 0.055 的白斜纹，实测在亮色主题上只压出约 2/255 的明度差，
     肉眼等于不存在（同主题色下截图对比，两套皮肤的背景完全一样，问题就出在这）。
     提到 .10 并把条纹加宽到 3px/8px 才真的读得出"纸"；
     再叠一层 -45° 的暖褐细纹，两个方向交叉才像纸纤维，单向斜纹像包装纸。 */
  --bg-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .22), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .10) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, rgba(120, 70, 40, .045) 0 3px, transparent 3px 8px);

  /* ---- 开箱礼物盒：奶白手工纸盒 + 暖橘缎带，边角故意不规整 ---- */
  --gift-1: #fffdf7;
  --gift-2: #e9cfa4;
  --gift-edge: rgba(160, 118, 70, .45);
  --gift-band: #ff8a6b;
  --gift-band-2: #ffe0cc;
  --gift-radius: 12px 9px 14px 10px / 10px 14px 9px 12px;
  --gift-radius-lid: 14px 10px 16px 11px / 11px 15px 10px 13px;
  --gift-halo: rgba(255, 206, 120, .38);

  /* ---- 彩带：糖果色（手工风就该是彩色纸屑，和 luxe 的香槟金区分开） ---- */
  --confetti-1: #ff8fb3;
  --confetti-2: #ffd54a;
  --confetti-3: #57b8e8;
  --confetti-4: #fff9e8;
  --confetti-5: #8fd98a;

  /* ---- 结尾烟花：糖果色的"发光版"（同 luxe.css 里那段理由：火星要比纸片亮） ---- */
  --fw-1: #ff9ec7;
  --fw-2: #ffe066;
  --fw-3: #8fe0ff;
  --fw-4: #ffffff;
  --fw-5: #b6f0a8;
}

/* 手工风的标题保留娃娃体原本的字距手感，不加衬线那套拉开字距的处理 */
html[data-skin="hand"] .hand,
html[data-skin="hand"] h1,
[data-skin="hand"] .hand {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

/* 手工风不给 .gate-box 加影子（理由见 luxe.css 同一处）：透明容器没资格有卡片影子 */
html[data-skin="hand"] .gate-box h1 {
  letter-spacing: .04em;
  text-indent: .04em;
}

/* ---- 照片：拍立得 ----
   厚白边 + 底边刻意留宽（真的拍立得就是底下那条能写字的白边），
   再让每页歪一点点方向交替 —— 手工风要的就是"随手贴上去的"，
   四张整齐对齐的照片一看就是模板。歪 1.2° 不会顶到屏幕边（.pimg 左右各留了 22px padding）。 */
html[data-skin="hand"] .pimg {
  background: #fffdf8;
  border-color: transparent;
  padding: 13px 13px 38px;
  box-shadow: 0 14px 26px -12px rgba(90, 60, 35, .55), 0 2px 6px rgba(90, 60, 35, .16);
  transform: rotate(-1.2deg);
}
html[data-skin="hand"] #content .page:nth-child(even) .pimg {
  transform: rotate(1deg);
}
/* 录音卡也是贴上去的一张卡，跟着歪，但幅度小一点（里面有按钮，歪多了会显脏） */
html[data-skin="hand"] .vcard {
  transform: rotate(-.5deg);
}