/* tokens.css — 全站唯一 token 源（DESIGN.md 终版 v2 §2–§9）。
   旧的「极简现代」青绿主题（青绿按钮、Inter、system-ui）已删除；旧变量名 --ui-* 保留为别名，统一指向下面的值。 */
:root {
  /* 底色阶 L0–L3 */
  --l0: #F3F2EF; --l1: #E9E6DF; --l2: #DFDACF; --l3: #D3CDBF;
  /* 文字与线 */
  --ink: #292919; --ink2: #55554A; --line: rgba(41,41,25,.14); --line2: rgba(41,41,25,.28);
  --seal: #A8322A; --ok: #36704A;
  /* 金色四个值 */
  --gold: #C9A24B; --gold-ink: #2A1E08; --gold-text: #7A5A1E; --gold-soft: color-mix(in srgb, var(--gold) 14%, var(--l1));
  /* 五行（全站唯一一套） */
  --el-wood: #36704A; --el-fire: #A23D26; --el-earth: #7D5F1E; --el-metal: #5E6268; --el-water: #2F4A7A;
  /* 深色头图 */
  --hero-bg: #16121F; --hero-ink: #F3ECDC;
  /* 字体 */
  --f-display: "FX Latin", "FX Black", "FX Serif", "FX Symbols", serif;
  --f-head: "FX Latin", "FX Serif", "FX Symbols", serif;
  --f-body: "FX Latin", "FX Kai", "FX Symbols", serif;
  --f-num: "FX Latin", "FX Serif", serif;
  /* 字阶八档 */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-22: 22px; --t-28: 28px; --t-40: 40px; --t-64: 64px;
  /* 间距六档 */
  --s-8: 8px; --s-16: 16px; --s-24: 24px; --s-40: 40px; --s-64: 64px; --s-96: 96px;
  /* 圆角四档 */
  --r-4: 4px; --r-8: 8px; --r-16: 16px; --r-pill: 999px;
  /* 动效 */
  --dur-press: 100ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 300ms; --ease: cubic-bezier(.2,.7,.2,1);

  /* ---- 旧变量别名（只读，不要再新增） ---- */
  --ui-font-display: var(--f-head); --ui-font-body: var(--f-body); --ui-font-mono: var(--f-body);
  --ui-r-sm: var(--r-8); --ui-r-md: var(--r-8); --ui-r-lg: var(--r-16); --ui-r-btn: var(--r-pill); --ui-r-chip: var(--r-pill); --ui-r-icon: var(--r-8); --ui-r-logo: var(--r-8); --ui-r-pill: var(--r-pill);
  --ui-h-weight: 600; --ui-h-ls: 0; --ui-btn-weight: 600; --ui-btn-ls: 0;
  --ui-ease: var(--ease); --ui-gap: 16px; --ui-content-max: 1200px;
  --ui-fs-body: 16px; --ui-fs-body-d: 16px; --ui-fs-h1: 28px; --ui-fs-h2: 22px;
  --ui-mark: var(--ui-btn-bg); --ui-on-mark: var(--ui-btn-ink);
  /* 旧名：--teal 早已改成金色文字，保留为别名（新代码直接用 --gold-text）；lenormand.css 的 .ln-wb 里另有局部定义 */
  --teal: var(--gold-text);
  /* 旧名：金色同义名，统一指 --gold（f1e 起各文件不再声明） */
  --gold2: var(--gold); --fx-gold: var(--gold);
}
@media (max-width: 760px) { :root { --t-28: 22px; --t-40: 28px; --t-64: 40px; } }
:root, html[data-tone="light"] {
  --ui-bg: var(--l0); --ui-surface: var(--l1); --ui-surface-2: var(--l2); --ui-ink: var(--ink); --ui-muted: var(--ink2);
  --ui-line: var(--line); --ui-line-strong: var(--line2); --x-accent: var(--gold-text); --x-accent-soft: var(--gold-soft);
  --ui-callout: var(--l1); --ui-callout-bar: var(--gold); --ui-hero: var(--l1); --ui-hero-ink: var(--ink);
  --ui-shadow: none; --ui-shadow-pop: 0 8px 24px rgba(18,17,20,.12); --ui-header-bg: var(--l0);
  --ui-btn-bg: var(--gold); --ui-btn-ink: var(--gold-ink); --ui-btn-border: var(--gold); --ui-btn-hover: var(--gold); --ui-btn-shadow: none;
  --ui-sel-bg: var(--l3); --ui-sel-ink: var(--ink); --ui-tab: var(--gold); --ui-num-bg: var(--gold-soft); --ui-num-ink: var(--gold-text); --ui-daybar: var(--gold);
  --ui-logo-bg: var(--ink); --ui-logo-ink: var(--l0); --ui-logo-border: 0;
  --ui-wood: var(--el-wood); --ui-fire: var(--el-fire); --ui-earth: var(--el-earth); --ui-metal: var(--el-metal); --ui-water: var(--el-water);
}
:is(html[data-theme="night"], html[data-tone="dark"]) {
  --l0: #121114; --l1: #1B1A1F; --l2: #25232A; --l3: #312E37;
  --ink: #EFEBDD; --ink2: #A3A394; --line: rgba(239,235,221,.14); --line2: rgba(239,235,221,.28);
  --seal: #E48A72; --ok: #6FA982;
  --gold: #CDB57A; --gold-ink: #16131C; --gold-text: #D9B866;
  --el-wood: #6FA982; --el-fire: #E07A5F; --el-earth: #C9A44A; --el-metal: #A9AEB5; --el-water: #7F9BCF;
  --ui-shadow-pop: 0 8px 24px rgba(0,0,0,.4);
}

/* ===== 动效变量（第四轮）：全站统一时长与曲线。上限 300ms，没有例外；新写的动效都用这些变量 ===== */
:root {
  --ui-dur-press: 100ms;   /* 按下反馈 */
  --ui-dur-fast: 160ms;    /* 勾选、悬停、提示 */
  --ui-dur-base: 240ms;    /* 标签滑动、折叠、弹层 */
  --ui-dur-slow: 300ms;    /* 底部抽屉等较大位移（上限） */
  --ui-dur-flip: 300ms;    /* 翻牌：改为 300ms 单面翻转（DESIGN §9，没有例外） */
  --ui-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ui-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ui-ease-spring: cubic-bezier(.2, .7, .2, 1);   /* 不再用回弹：同 --ease */
  --ui-slide-shift: 6px;   /* 内容切换的位移只几个像素 */
}
@media (prefers-reduced-motion: reduce) {
  :root { --ui-dur-press: 1ms; --ui-dur-fast: 1ms; --ui-dur-base: 1ms; --ui-dur-slow: 1ms; --ui-dur-flip: 1ms; --ui-slide-shift: 0px; }
}

/* ===== 深度变量（DESIGN.md v3 §6.2）：浮起 / 特写 / 内凹 / 卡面 / 纸纹 / 金顶线 / 辉光 / 金按钮，日夜两套。全站唯一来源 ===== */
html[data-tone][data-tone],html[data-theme][data-theme],:root{
  --dp-up:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -16px rgba(120,85,20,.45),0 2px 4px -2px rgba(120,85,20,.18);
  --dp-up-hi:0 1px 0 rgba(255,255,255,.75) inset,0 18px 34px -18px rgba(140,100,30,.55),0 3px 8px -4px rgba(120,85,20,.25);
  --dp-in:inset 0 2px 5px rgba(110,80,20,.16),inset 0 -1px 2px rgba(255,255,255,.6);
  --dp-in-deep:inset 0 3px 8px rgba(110,80,20,.22),inset 0 -2px 3px rgba(255,255,255,.55);
  --dp-card:linear-gradient(180deg,rgba(255,253,247,.9),rgba(246,238,220,.55));
  --dp-groove:linear-gradient(180deg,rgba(110,80,20,.07),rgba(255,255,255,.35));
  --dp-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --dp-hair:linear-gradient(90deg,transparent,var(--gold),transparent);
  --dp-glow:0 0 48px -12px rgba(201,162,75,.35);
  --dp-gold-btn:linear-gradient(180deg,#E9D49A,#B8964F);
  --dp-gold-btn-sh:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(130,90,20,.3),0 10px 20px -10px rgba(140,100,30,.6);
  --dp-clouds:linear-gradient(transparent,transparent)}
:is(html[data-theme=night],html[data-tone=dark]):is(html[data-theme=night],html[data-tone=dark]){
  --dp-up:0 1px 0 rgba(255,255,255,.06) inset,0 12px 26px -16px rgba(0,0,0,.8),0 2px 4px -2px rgba(0,0,0,.5);
  --dp-up-hi:0 1px 0 rgba(255,255,255,.08) inset,0 18px 34px -18px rgba(0,0,0,.9),0 0 0 1px rgba(205,181,122,.14);
  --dp-in:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 2px rgba(255,255,255,.05);
  --dp-in-deep:inset 0 4px 10px rgba(0,0,0,.55),inset 0 -2px 3px rgba(255,255,255,.06);
  --dp-card:linear-gradient(180deg,rgba(43,33,66,.28),rgba(22,19,28,.25));
  --dp-groove:linear-gradient(180deg,rgba(0,0,0,.28),rgba(255,255,255,.02));
  --dp-glow:0 0 48px -12px rgba(230,207,147,.35);
  --dp-gold-btn-sh:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -3px 6px rgba(90,60,10,.35),0 10px 22px -10px rgba(0,0,0,.8)}