/* 设计令牌。
 *
 * 一件器物的五种材质：墨玉 / 纸白 / 松青 / 朱漆 / 霁蓝。
 * 每套皮只负责"材质与光"，版式与尺度由全局令牌统一，所以换皮不会换骨。
 * 新增一套皮 = 在本文件加一个 [data-skin="…"] 块 + 在 data/scenes.js 的 SKINS 里登记一行。
 */

:root {
  /* —— 字体：仪式性文字走衬线（宋/明体），功能性文字走无衬线 —— */
  --font-rite: "LXGW WenKai", "LXGW WenKai Lite", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
               "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-ui: -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
             "Noto Sans SC", system-ui, sans-serif;
  --font-num: "Iowan Old Style", "Palatino", "Times New Roman", var(--font-rite);

  /* —— 尺度：以 8 为基，仪式感来自留白而不是装饰 —— */
  --u: 8px;
  --r-sm: 3px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* —— 器身：App 在宽屏上是一件放在案面上的器，不是一张铺满的网页 —— */
  --app-w: 520px;
  --bar-h: 62px;
  --dial-max: 680px;

  /* —— 运动 —— */
  --ease-settle: cubic-bezier(.16, .84, .28, 1);
  --ease-rite: cubic-bezier(.32, .04, .12, 1);
  --ease-push: cubic-bezier(.22, 1, .3, 1);
  --t-page: .42s;
  --t-sheet: .58s;
}

/* 减弱动效：用户在设置里开的开关，和系统偏好走同一条路 */
[data-motion="calm"] { --t-page: .01s; --t-sheet: .18s; }

/* —————————————————— 墨玉 · 夜观 —————————————————— */
[data-skin="ink"] {
  --bg-deep: #07070a;
  --bg: #101014;
  --bg-lift: #191720;
  --bg-sink: #0b0a0e;
  --plate-a: #221c17;
  --plate-b: #0d0b0b;
  --plate-rim: #3d2c1c;

  --line: rgba(200, 168, 106, .18);
  --line-strong: rgba(200, 168, 106, .42);
  --engrave: rgba(0, 0, 0, .55);

  --gold: #c8a86a;
  --gold-hi: #f0dfae;
  --ink: #e9e4d8;
  --ink-dim: rgba(233, 228, 216, .52);
  --ink-faint: rgba(233, 228, 216, .28);
  --vermilion: #cf4b3a;
  --vermilion-soft: rgba(207, 75, 58, .22);

  --sheen: rgba(255, 238, 196, .10);
  --glow: rgba(200, 168, 106, .30);
  --grain-opacity: .05;
  --grain-blend: overlay;
  --shadow-plate: 0 40px 90px -30px rgba(0,0,0,.95), 0 2px 0 rgba(255,235,190,.05) inset;
  --scrim: rgba(4, 3, 2, .58);
  --swatch: linear-gradient(140deg, #2a2118 0%, #0b0c0e 100%);
  --desk: radial-gradient(130% 100% at 50% -10%, #17151a 0%, #08080b 55%, #030304 100%);
  --scheme: dark;
}

/* —————————————————— 纸白 · 晨读 —————————————————— */
[data-skin="paper"] {
  --bg-deep: #e7dfd0;
  --bg: #f3ece0;
  --bg-lift: #fbf6ec;
  --bg-sink: #eee5d6;
  --plate-a: #fbf7ee;
  --plate-b: #eae0cf;
  --plate-rim: #cdbb9c;

  --line: rgba(60, 48, 36, .20);
  --line-strong: rgba(60, 48, 36, .48);
  --engrave: rgba(255, 255, 255, .7);

  --gold: #8a6a3a;
  --gold-hi: #6b4f28;
  --ink: #2c2721;
  --ink-dim: rgba(44, 39, 33, .62);
  --ink-faint: rgba(44, 39, 33, .32);
  --vermilion: #b03a2c;
  --vermilion-soft: rgba(176, 58, 44, .14);

  --sheen: rgba(255, 255, 255, .5);
  --glow: rgba(176, 58, 44, .22);
  --grain-opacity: .35;
  --grain-blend: multiply;
  --shadow-plate: 0 30px 70px -34px rgba(70,52,30,.55), 0 1px 0 rgba(255,255,255,.8) inset;
  --scrim: rgba(120, 98, 62, .32);
  --swatch: linear-gradient(140deg, #fdf8ee 0%, #ddd0b8 100%);
  --desk: radial-gradient(130% 100% at 50% -10%, #ded2bd 0%, #c9bca4 60%, #b3a58c 100%);
  --scheme: light;
}

/* —————————————————— 松青 · 山行 —————————————————— */
[data-skin="jade"] {
  --bg-deep: #070d0b;
  --bg: #0d1512;
  --bg-lift: #131f1a;
  --bg-sink: #0a110e;
  --plate-a: #16241e;
  --plate-b: #0a120f;
  --plate-rim: #1e3830;

  --line: rgba(139, 190, 166, .18);
  --line-strong: rgba(139, 190, 166, .45);
  --engrave: rgba(0, 0, 0, .5);

  --gold: #8bbea6;
  --gold-hi: #d5ecdf;
  --ink: #dfeee6;
  --ink-dim: rgba(223, 238, 230, .55);
  --ink-faint: rgba(223, 238, 230, .28);
  --vermilion: #d9825a;
  --vermilion-soft: rgba(217, 130, 90, .20);

  --sheen: rgba(210, 255, 232, .10);
  --glow: rgba(139, 190, 166, .28);
  --grain-opacity: .06;
  --grain-blend: overlay;
  --shadow-plate: 0 40px 90px -32px rgba(0,0,0,.9), 0 2px 0 rgba(200,255,230,.05) inset;
  --scrim: rgba(2, 8, 6, .58);
  --swatch: linear-gradient(140deg, #2e4c40 0%, #0a120f 100%);
  --desk: radial-gradient(130% 100% at 50% -10%, #12201b 0%, #070d0b 60%, #030605 100%);
  --scheme: dark;
}

/* —————————————————— 朱漆 · 礼器 —————————————————— */
[data-skin="cinnabar"] {
  --bg-deep: #150607;
  --bg: #20090a;
  --bg-lift: #2c0e0e;
  --bg-sink: #180708;
  --plate-a: #3a1310;
  --plate-b: #150607;
  --plate-rim: #6d2a1e;

  --line: rgba(232, 190, 128, .20);
  --line-strong: rgba(232, 190, 128, .48);
  --engrave: rgba(0, 0, 0, .55);

  --gold: #e0b878;
  --gold-hi: #ffe6b8;
  --ink: #f6e6d6;
  --ink-dim: rgba(246, 230, 214, .56);
  --ink-faint: rgba(246, 230, 214, .3);
  --vermilion: #f0603f;
  --vermilion-soft: rgba(240, 96, 63, .22);

  --sheen: rgba(255, 224, 180, .14);
  --glow: rgba(224, 184, 120, .34);
  --grain-opacity: .07;
  --grain-blend: overlay;
  --shadow-plate: 0 40px 92px -30px rgba(40,4,4,.95), 0 2px 0 rgba(255,214,164,.07) inset;
  --scrim: rgba(24, 4, 4, .6);
  --swatch: linear-gradient(140deg, #8c2a1c 0%, #260a08 100%);
  --desk: radial-gradient(130% 100% at 50% -10%, #2a0c0c 0%, #140506 60%, #070202 100%);
  --scheme: dark;
}

/* —————————————————— 霁蓝 · 观星 —————————————————— */
[data-skin="azure"] {
  --bg-deep: #04070f;
  --bg: #0a1020;
  --bg-lift: #101a30;
  --bg-sink: #070c18;
  --plate-a: #16233f;
  --plate-b: #070c18;
  --plate-rim: #2b4372;

  --line: rgba(160, 196, 244, .18);
  --line-strong: rgba(160, 196, 244, .44);
  --engrave: rgba(0, 0, 0, .5);

  --gold: #a7c6f0;
  --gold-hi: #e4efff;
  --ink: #e2ecfb;
  --ink-dim: rgba(226, 236, 251, .54);
  --ink-faint: rgba(226, 236, 251, .28);
  --vermilion: #e2705f;
  --vermilion-soft: rgba(226, 112, 95, .2);

  --sheen: rgba(206, 232, 255, .12);
  --glow: rgba(167, 198, 240, .3);
  --grain-opacity: .05;
  --grain-blend: overlay;
  --shadow-plate: 0 40px 92px -30px rgba(0,2,10,.95), 0 2px 0 rgba(200,228,255,.06) inset;
  --scrim: rgba(2, 5, 12, .6);
  --swatch: linear-gradient(140deg, #24406e 0%, #06090f 100%);
  --desk: radial-gradient(130% 100% at 50% -10%, #0e1730 0%, #060a14 60%, #020308 100%);
  --scheme: dark;
}