/* ════════════════════════════════════════════════════════════════════════════
 * ELIO 三站统一主题令牌  elio-theme.css   v1.0
 * ----------------------------------------------------------------------------
 * 唯一色值事实源（与主站 elio888.top 的 tokens.css 同源抽取）。
 * 覆盖站点：studio.elio888.top（工作台/客户门户）、budget.elio888.top（预算台）
 *
 * 三层维度，与主站完全一致：
 *   html[data-theme]  深浅基调（dark 为唯一默认基调）
 *   html[data-accent] 强调色（gold / champagne / amber / clay / verdant）
 *   html[data-skin]   风格皮肤（elio / wabi / midcentury / minimal / cream）
 *
 * 子站原有 CSS 里的历史变量名（--brand / --ink / --gray / --paper / --g5 …）
 * 由本文件末尾的「映射层」统一桥接到上述语义令牌，
 * 因此子站样式表无需逐条改写即可整体换肤。
 *
 * 加载要求：必须排在页面内联 <style> 之后（本文件通常置于 </head> 前），
 *          以保证同权重规则由本文件最终胜出。
 * ════════════════════════════════════════════════════════════════════════════ */

/* ┌──────────────────────────────────────────────────────────────────────────┐
 * │ 1. 主站语义令牌层（抽取自 tokens.css：深/浅两态 + 5 强调色 + 兼容别名）      │
 * └──────────────────────────────────────────────────────────────────────────┘ */
/* ────────────────────────────────────────────────────────────────────────────
   1 · 深色态（品牌黑金；数值与历史品牌层 1:1 对齐，保证深色视觉零回归）
   ──────────────────────────────────────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* 1.1 底层与表面（语义：底 / 交替底 / 面 / 抬升面 / 悬浮面） */
  --bg-base:        #0A0A0A;   /* 页面底 */
  --bg-base-alt:    #0A0A0A;   /* 板块交替底 */
  --bg-surface:     #111110;   /* 面 · 卡片 */
  --bg-surface-2:   #161513;   /* 抬升面 */
  --bg-surface-3:   #1D1B18;   /* 悬浮面 */
  --bg-glass:       rgba(10, 10, 10, .82);   /* 毛玻璃条（导航滚动后） */
  --bg-menu:        rgba(12, 12, 11, .98);   /* 浮层 / 菜单面板 */
  --bg-wash:        rgba(245, 241, 234, .06);/* 极淡色块（chip / 胶囊底） */

  /* 1.2 文字层级（正文 / 次要 / 极淡 / 占位） */
  --text-primary:   #EDEAE4;
  --text-secondary: #9B968E;
  --text-muted:     #6E6A63;
  --text-ghost:     #4A4741;
  --text-faint:     #6E6A63;   /* 语义占位（与深色 --text-muted 同值） */
  --text-strong:    #F5F1EA;   /* 杏仁 · 强标题 / 反白 */
  --text-on-accent: #0A0A0A;   /* 强调色块上的文字 */

  /* 1.3 线条（统一三档，禁止随手写 rgba(255,255,255,x)） */
  --line:        rgba(237, 234, 228, .12);
  --line-soft:   rgba(237, 234, 228, .07);
  --line-strong: rgba(237, 234, 228, .22);

  /* 1.4 遮罩（大图上的渐变压暗） */
  --scrim:     linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.28) 38%, rgba(10,10,10,.86) 100%);
  --scrim-top: linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 42%);

  /* 1.5 状态色 */
  --state-ok:     #5F9E7A;
  --state-warn:   #C9A05B;
  --state-danger: #A65A4A;
  --state-info:   #7C8AA0;

  /* 1.6 阴影（暖黑、低饱和） */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sh-2: 0 10px 30px rgba(0, 0, 0, .40);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .55);

  /* 1.7 强调色兜底（未设置 data-accent 时 = 品牌金） */
  --accent:       #B08D5A;
  --accent-hover: #C9A57B;
  --accent-soft:  rgba(176, 141, 90, .12);
  --accent-hue:   36;
  --accent-on:    #0A0A0A;

  /* 1.8 动效时长与阶梯（v3 · motion-v3-spec 第 1 步）
     历史遗留：全站 20+ 处 transition 各写各的（.18s/.25s/.3s/.35s/.4s/.42s/.9s），
     时长不可预期。这里收口为「三档时长 + 一档交错」唯一事实源：
       fast  .28s → 微交互（按钮 / 链接 / 卡片 hover / 线条伸缩）
       base  .52s → 结构性过渡（面板 / 遮罩 / 主题换肤）
       slow  .92s → 入场（同组元素整批只用一档）
       stagger 90ms → 卡片列表 / 导航子项的组内错峰
     注：--ease-out / --ease-inout 已由 brand.css :root 定义（值同规格，不重复定义）。 */
  --dur-fast: .28s;
  --dur-base: .52s;
  --dur-slow: .92s;
  --stagger:  70ms;
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · 浅色态（v3 暖白方案）
   底 #FFFDFA（v3 由 #FAF8F5 提亮）/ 交替底 #FBF8F3 / 面 #FFFFFF / 正文 #1A1815
   线 rgba(43,43,43,.10)（v3 由暖褐改中性炭灰）/ 强调金 #8A6534（浅底加深一档）
   对比度实测（v3 复算，相对各自底色，WCAG 2.1）：
     正文 #1A1815 on #FFFDFA = 17.4:1（≥7:1 ✔）／ on 交替底 #FBF8F3 = 16.7:1 ✔
     次文 #5C564E on #FFFDFA =  7.1:1（≥4.5:1 ✔）／ on 交替底 #FBF8F3 =  6.8:1 ✔
     强调 #8A6534 on #FFFDFA =  5.2:1（≥4.5:1 ✔，v3 由 4.9:1 提升）
     极淡 #8F887D on #FFFDFA =  3.5:1（仅用于装饰 / 非必要元信息，≥3:1 ✔）
     ※ v3 浅色调色原则（theme-v3-spec 2.3）：只允许「墨色文字 + 暖金强调」，
       不引入任何蓝紫霓虹；浅底上的浮层一律用 --scrim 提亮，不用深色蒙版。
     ※ 2026-10-01 浅色可读性修正：历史 --text-muted #8C857B（纸白仅 3.65:1）、
       --text-ghost #B5AFA4（纸白仅 2.18:1）未达「meta 文字 4.5:1 / 装饰 3:1」，
       已按全站最差底色 #FFFFFF 重新取值；历史 #8C857B 降级为 --text-faint（纯装饰保留）。
   ──────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;

  /* 2.1 底层与表面（v3 · theme-v3-spec 2.1：纸白 #FAF8F5 → 暖白 #FFFDFA，
     板块交替底由「= 面 #FFFFFF」改为「比底深一档 #FBF8F3」——旧值深浅同色，
     导致交替板块看不出分区又被卡片同化） */
  --bg-base:        #FFFDFA;   /* 页面底 · 暖白（v3：原 #FAF8F5） */
  --bg-base-alt:    #FBF8F3;   /* 板块交替底 · 比底深一档（v3：原 #FFFFFF） */
  --bg-surface:     #FFFFFF;   /* 面 · 卡片 */
  --bg-surface-2:   #F5F1EA;   /* 抬升面 · 暖灰（浅色下与面区分） */
  --bg-surface-3:   #EFEAE1;   /* 悬浮面 */
  --bg-glass:       rgba(255, 253, 250, .88);   /* 与 v3 暖白底同色（原 250,248,245） */
  --bg-menu:        rgba(255, 255, 255, .98);
  --bg-wash:        rgba(26, 24, 21, .04);

  /* 2.2 文字层级（v3 复算：按新底 #FFFDFA / 新交替底 #FBF8F3 重新取值，
     全部仍 ≥ WCAG AA；数值见上方 §2 抬头注释） */
  --text-primary:   #1A1815;   /* 17.4:1 on 暖白 / 16.7:1 on 交替底 */
  --text-secondary: #5C564E;   /*  7.1:1 on 暖白 /  6.8:1 on 交替底 */
  --text-muted:     #736C62;   /*  5.2:1 on 面 / 5.1:1 on 暖白 / 4.6:1 on 抬升面 */
  --text-ghost:     #8F887D;   /*  3.5:1 on 面（仅装饰，≥3:1） */
  --text-faint:     #8C857B;   /*  3.4:1 纯装饰保留（非必要信息） */
  --text-strong:    #1A1815;
  --text-on-accent: #FFFFFF;

  /* 2.3 线条（v3 · theme-v3-spec 2.2：暖褐 rgba(26,24,21,·) → 中性炭灰
     rgba(43,43,43,·)，浅底描边不再带暖偏色） */
  --line:        rgba(43, 43, 43, .10);
  --line-soft:   rgba(43, 43, 43, .055);
  --line-strong: rgba(43, 43, 43, .20);

  /* 2.4 遮罩（浅底上以纸白压亮，保证大图上深色标题可读） */
  --scrim:     linear-gradient(180deg, rgba(250,248,245,.72) 0%, rgba(250,248,245,.30) 38%, rgba(250,248,245,.88) 100%);
  --scrim-top: linear-gradient(180deg, rgba(250,248,245,.82) 0%, rgba(250,248,245,0) 42%);

  /* 2.5 状态色（浅底加深） */
  --state-ok:     #2F6B4F;
  --state-warn:   #8A6534;
  --state-danger: #99302A;
  --state-info:   #4A5A75;

  /* 2.6 阴影（浅底柔化） */
  --sh-1: 0 1px 2px rgba(26, 24, 21, .06);
  --sh-2: 0 10px 30px rgba(26, 24, 21, .10);
  --sh-3: 0 24px 64px rgba(26, 24, 21, .14);

  /* 2.7 强调色兜底（浅色下加深一档，禁用纯白底） */
  --accent:       #8A6534;
  --accent-hover: #A87B3F;
  --accent-soft:  rgba(138, 101, 52, .10);
  --accent-hue:   36;
  --accent-on:    #FFFFFF;
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · 强调色板（主题 × 5 强调色；浅色态自动加深一档）
   ──────────────────────────────────────────────────────────────────────────── */
/* 3.1 品牌金 Brand Gold */
html[data-theme="dark"][data-accent="gold"] { --accent:#B08D5A; --accent-hover:#C9A57B; --accent-soft:rgba(176,141,90,.12); --accent-hue:36; }
html[data-theme="light"][data-accent="gold"] { --accent:#8A6534; --accent-hover:#A87B3F; --accent-soft:rgba(138,101,52,.10); --accent-hue:36; }
/* 3.2 香槟金 Champagne */
html[data-theme="dark"][data-accent="champagne"] { --accent:#C9A57B; --accent-hover:#DCC49B; --accent-soft:rgba(201,165,123,.14); --accent-hue:34; }
html[data-theme="light"][data-accent="champagne"] { --accent:#8A6A3E; --accent-hover:#A2825A; --accent-soft:rgba(138,106,62,.10); --accent-hue:34; }
/* 3.3 琥珀 Amber */
html[data-theme="dark"][data-accent="amber"] { --accent:#C9A05B; --accent-hover:#DDB773; --accent-soft:rgba(201,160,91,.14); --accent-hue:39; }
html[data-theme="light"][data-accent="amber"] { --accent:#87662F; --accent-hover:#9E7C3F; --accent-soft:rgba(135,102,47,.10); --accent-hue:39; }
/* 3.4 陶土 Clay */
html[data-theme="dark"][data-accent="clay"] { --accent:#A65A4A; --accent-hover:#C2765F; --accent-soft:rgba(166,90,74,.14); --accent-hue:8; }
html[data-theme="light"][data-accent="clay"] { --accent:#8A3F30; --accent-hover:#A5523F; --accent-soft:rgba(138,63,48,.10); --accent-hue:8; }
/* 3.5 松绿 Verdant */
html[data-theme="dark"][data-accent="verdant"] { --accent:#5F9E7A; --accent-hover:#7DB898; --accent-soft:rgba(95,158,122,.14); --accent-hue:147; }
html[data-theme="light"][data-accent="verdant"] { --accent:#3F7355; --accent-hover:#4F8A68; --accent-soft:rgba(63,115,85,.10); --accent-hue:147; }

/* ────────────────────────────────────────────────────────────────────────────
   4 · 兼容别名（历史变量名 → 语义令牌；历史组件无需改动即可跟随主题）
      说明：本段是唯一的重定向入口，styles.css / brand.css 中的历史重映射已废止。
   ──────────────────────────────────────────────────────────────────────────── */
:root,
html[data-theme] {
  /* 4.1 品牌基色别名（brand.css 历史名） */
  --brand-ink:      var(--bg-base);
  --brand-ink-2:    var(--bg-surface);
  --brand-ink-3:    var(--bg-surface-2);
  --brand-ink-4:    var(--bg-surface-3);
  --brand-gold:     var(--accent);
  --brand-gold-l:   var(--accent-hover);
  --brand-gold-dim: var(--accent-soft);
  --brand-almond:   var(--text-strong);
  --brand-copper:   #6B3A2E;
  --brand-tx:       var(--text-primary);
  --brand-tx-dim:   var(--text-secondary);
  --brand-tx-mute:  var(--text-muted);
  --brand-tx-ghost: var(--text-ghost);
  --brand-line:        var(--line);
  --brand-line-soft:   var(--line-soft);
  --brand-line-strong: var(--line-strong);
  --brand-scrim:     var(--scrim);
  --brand-scrim-top: var(--scrim-top);

  /* 4.2 V5/V8 历史短名别名 */
  --bg:        var(--bg-base);
  --surface:   var(--bg-surface);
  --surface2:  var(--bg-surface-2);
  --border:    var(--line);
  --text:      var(--text-primary);
  --text2:     var(--text-secondary);
  --text3:     var(--text-muted);
  --gold:      var(--accent);
  --gold-l:    var(--accent-hover);
  --accent-dim: var(--accent-soft);
  --ink:       var(--bg-base);
  --ink2:      var(--bg-surface);
  --almond:    var(--text-strong);
  --copper:    var(--brand-copper);
  --tx:        var(--text-primary);
  --tx-dim:    var(--text-secondary);
  --line-strong: var(--line-strong);

  /* 4.3 板块交替底（历史 --section-alt-bg 黑底即由此收敛为两态令牌） */
  --section-alt-bg: var(--bg-base-alt);

  /* 4.4 状态别名 */
  --ok:     var(--state-ok);
  --warn:   var(--state-warn);
  --danger: var(--state-danger);
  --info:   var(--state-info);

  /* 4.5 3D / 光效联动色（历史 --v5-accent 由 JS 直写，现改由令牌驱动） */
  --v5-accent: var(--accent);

  /* 4.6 阴影别名 */
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-2);
  --shadow-3: var(--sh-3);

  /* 4.7 强调色块上的文字色 */
  --accent-on: var(--text-on-accent);

  /* 4.8 铜色块（作品卡 .wc-flag 等）上的文字：铜底两态均为深色，故文字恒为浅色 */
  --text-on-copper: #F5F1EA;
}
/* ┌──────────────────────────────────────────────────────────────────────────┐
 * │ 2. 主站风格皮肤层（抽取自 tokens.css：5 皮肤 × 深/浅两态色板）              │
 * └──────────────────────────────────────────────────────────────────────────┘ */
   唯一入口 html[data-skin]，与 html[data-theme] / html[data-accent] 三层叠加；
   切换由 app.js 完成（applySkin / pfTickSkinAuto，排班见规格 4.1），不写内联样式。
   本层只覆盖色彩令牌，不触碰字号 / 间距 / 动效 / 结构。
   规则共 10 组 = 5 皮肤 × 深 / 浅两态：
     · 4 个特殊皮肤（侘寂 / 中古 / 极简 / 奶油）按规格色板逐字落地，含完整语义令牌，
       并按规格「skin≠elio 时以本段为准」接管 --accent（即覆盖 data-accent 配色）；
     · elio（原生金）2 组仅回填与基础层同值的中性色 / 线条，**不接管 --accent**，
       故规格「skin=elio（或未设置）时保持原有『主题 × 强调色』体系」100% 成立
       （选「原生金」= 回到品牌 5 强调色，视觉与未设 data-skin 完全一致）。 */

/* 00 原生金 ELIO · 基线回填（值 = tokens.css 基础层 2.x / 3.x，等价零覆盖） */
html[data-skin="elio"][data-theme="dark"]{
  --bg-base:#0A0A0A;--bg-base-alt:#0A0A0A;--bg-surface:#111110;--bg-surface-2:#161513;--bg-surface-3:#1D1B18;
  --line:rgba(237,234,228,.12);--line-soft:rgba(237,234,228,.07);--line-strong:rgba(237,234,228,.22);
}
html[data-skin="elio"][data-theme="light"]{
  --bg-base:#FFFDFA;--bg-base-alt:#FBF8F3;--bg-surface:#FFFFFF;--bg-surface-2:#F5F1EA;--bg-surface-3:#EFEAE1;
  --line:rgba(43,43,43,.10);--line-soft:rgba(43,43,43,.055);--line-strong:rgba(43,43,43,.20);
}

/* 01 侘寂 · WABI-SABI：微水泥灰褐、稻草、旧木 */
html[data-skin="wabi"][data-theme="light"]{
  --bg-base:#EDE8E0;--bg-base-alt:#E7E1D8;
  --bg-surface:#F6F2EB;--bg-surface-2:#FAF7F1;--bg-surface-3:#FFFCF7;
  --bg-glass:rgba(246,242,235,.82);--bg-menu:rgba(250,247,241,.98);--bg-wash:rgba(56,51,44,.05);
  --text-primary:#38332C;--text-secondary:#5F584E;--text-muted:#847C71;--text-ghost:#A69D91;
  --text-strong:#26221C;--text-on-accent:#FFFCF7;--text-faint:#A69D91;
  --line:rgba(56,51,44,.14);--line-soft:rgba(56,51,44,.08);--line-strong:rgba(56,51,44,.26);
  --accent:#8A7454;--accent-hover:#A08A66;--accent-soft:rgba(138,116,84,.12);--accent-hue:38;--accent-on:#FFFCF7;
}
html[data-skin="wabi"][data-theme="dark"]{
  --bg-base:#14120F;--bg-base-alt:#14120F;
  --bg-surface:#1B1815;--bg-surface-2:#211E1A;--bg-surface-3:#282420;
  --bg-glass:rgba(20,18,15,.82);--bg-menu:rgba(27,24,21,.98);--bg-wash:rgba(223,216,205,.06);
  --text-primary:#DFD8CD;--text-secondary:#9C9488;--text-muted:#736B60;--text-ghost:#514A42;
  --text-strong:#F0EAE0;--text-on-accent:#14120F;--text-faint:#736B60;
  --line:rgba(223,216,205,.13);--line-soft:rgba(223,216,205,.07);--line-strong:rgba(223,216,205,.24);
  --accent:#A8916C;--accent-hover:#C0A883;--accent-soft:rgba(168,145,108,.15);--accent-hue:38;--accent-on:#14120F;
}

/* 02 中古 · MID-CENTURY：胡桃木、砖橙、芥末 */
html[data-skin="midcentury"][data-theme="light"]{
  --bg-base:#F5F0E7;--bg-base-alt:#EFE9DF;
  --bg-surface:#FFFDF9;--bg-surface-2:#FFFEFA;--bg-surface-3:#FFFFFF;
  --bg-glass:rgba(255,253,249,.82);--bg-menu:rgba(255,254,250,.98);--bg-wash:rgba(44,32,24,.05);
  --text-primary:#2C2018;--text-secondary:#5C4A3A;--text-muted:#86705B;--text-ghost:#A8957F;
  --text-strong:#1D140E;--text-on-accent:#FFFDF9;--text-faint:#A8957F;
  --line:rgba(44,32,24,.14);--line-soft:rgba(44,32,24,.08);--line-strong:rgba(44,32,24,.26);
  --accent:#B4663A;--accent-hover:#C87E4F;--accent-soft:rgba(180,102,58,.12);--accent-hue:20;--accent-on:#FFFDF9;
}
html[data-skin="midcentury"][data-theme="dark"]{
  --bg-base:#191410;--bg-base-alt:#191410;
  --bg-surface:#211A14;--bg-surface-2:#281F18;--bg-surface-3:#30251C;
  --bg-glass:rgba(25,20,16,.82);--bg-menu:rgba(33,26,20,.98);--bg-wash:rgba(232,220,203,.06);
  --text-primary:#E8DCCB;--text-secondary:#A8947C;--text-muted:#7D6B57;--text-ghost:#5A4C3D;
  --text-strong:#F5EBDA;--text-on-accent:#191410;--text-faint:#7D6B57;
  --line:rgba(232,220,203,.13);--line-soft:rgba(232,220,203,.07);--line-strong:rgba(232,220,203,.24);
  --accent:#D08A4F;--accent-hover:#E3A26A;--accent-soft:rgba(208,138,79,.15);--accent-hue:26;--accent-on:#191410;
}

/* 03 极简 · MINIMAL：纯白、冷灰、墨黑 */
html[data-skin="minimal"][data-theme="light"]{
  --bg-base:#FFFFFF;--bg-base-alt:#FCFCFC;
  --bg-surface:#FFFFFF;--bg-surface-2:#FAFAFA;--bg-surface-3:#F5F5F5;
  --bg-glass:rgba(255,255,255,.82);--bg-menu:rgba(255,255,255,.98);--bg-wash:rgba(0,0,0,.04);
  --text-primary:#101010;--text-secondary:#565656;--text-muted:#7C7C7C;--text-ghost:#A8A8A8;
  --text-strong:#000000;--text-on-accent:#FFFFFF;--text-faint:#A8A8A8;
  --line:rgba(0,0,0,.10);--line-soft:rgba(0,0,0,.05);--line-strong:rgba(0,0,0,.20);
  --accent:#1C1C1C;--accent-hover:#3A3A3A;--accent-soft:rgba(0,0,0,.06);--accent-hue:0;--accent-on:#FFFFFF;
}
html[data-skin="minimal"][data-theme="dark"]{
  --bg-base:#0D0D0D;--bg-base-alt:#0D0D0D;
  --bg-surface:#141414;--bg-surface-2:#1A1A1A;--bg-surface-3:#202020;
  --bg-glass:rgba(13,13,13,.82);--bg-menu:rgba(20,20,20,.98);--bg-wash:rgba(240,240,240,.06);
  --text-primary:#F0F0F0;--text-secondary:#A0A0A0;--text-muted:#787878;--text-ghost:#555555;
  --text-strong:#FFFFFF;--text-on-accent:#0D0D0D;--text-faint:#787878;
  --line:rgba(240,240,240,.12);--line-soft:rgba(240,240,240,.06);--line-strong:rgba(240,240,240,.22);
  --accent:#D8D8D8;--accent-hover:#F0F0F0;--accent-soft:rgba(240,240,240,.10);--accent-hue:0;--accent-on:#0D0D0D;
}

/* 04 奶油 · CREAM：纸感暖白、淡金 */
html[data-skin="cream"][data-theme="light"]{
  --bg-base:#FBF7F0;--bg-base-alt:#F6F1E8;
  --bg-surface:#FFFFFF;--bg-surface-2:#FFFDFA;--bg-surface-3:#FFFFFF;
  --bg-glass:rgba(255,255,255,.82);--bg-menu:rgba(255,253,250,.98);--bg-wash:rgba(51,48,43,.04);
  --text-primary:#33302B;--text-secondary:#645F55;--text-muted:#8C857A;--text-ghost:#B0A89B;
  --text-strong:#24211C;--text-on-accent:#FFFFFF;--text-faint:#B0A89B;
  --line:rgba(51,48,43,.12);--line-soft:rgba(51,48,43,.07);--line-strong:rgba(51,48,43,.22);
  --accent:#C4A06A;--accent-hover:#D6B482;--accent-soft:rgba(196,160,106,.12);--accent-hue:36;--accent-on:#FFFFFF;
}
html[data-skin="cream"][data-theme="dark"]{
  --bg-base:#17140F;--bg-base-alt:#17140F;
  --bg-surface:#1F1B16;--bg-surface-2:#26211B;--bg-surface-3:#2E2822;
  --bg-glass:rgba(23,20,15,.82);--bg-menu:rgba(31,27,22,.98);--bg-wash:rgba(237,228,214,.06);
  --text-primary:#EDE4D6;--text-secondary:#AFA391;--text-muted:#857A6A;--text-ghost:#5E5549;
  --text-strong:#FAF3E7;--text-on-accent:#17140F;--text-faint:#857A6A;
  --line:rgba(237,228,214,.13);--line-soft:rgba(237,228,214,.07);--line-strong:rgba(237,228,214,.24);
  --accent:#D4B483;--accent-hover:#E6CA9E;--accent-soft:rgba(212,180,131,.15);--accent-hue:36;--accent-on:#17140F;
}

/* 皮肤切换过渡（规格第 2 步尾段）：令牌驱动的 0.55s 颜色统一渐变，避免生硬跳色；
   .skin-anim 由 app.js applySkin 在切换瞬间挂上、700ms 后摘除（首帧不挂，避免初载整站过渡）。 */
html.skin-anim,html.skin-anim body,
html.skin-anim .section,html.skin-anim .bg-cell,html.skin-anim .works-grid,
html.skin-anim .card,html.skin-anim header,html.skin-anim footer{
  transition:background-color .55s var(--ease-out),color .55s var(--ease-out),
             border-color .55s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  html.skin-anim,html.skin-anim body,html.skin-anim .section,html.skin-anim .bg-cell,
  html.skin-anim .works-grid,html.skin-anim .card,html.skin-anim header,html.skin-anim footer{
    transition:none !important;
  }
}
/* v3-AUTO-APPEND-END */
/* ┌──────────────────────────────────────────────────────────────────────────┐
 * │ 3. 子站语义映射层                                                          │
 * │    把 studio / budget 的历史变量名桥接到主站语义令牌。                      │
 * │    权重说明：html[data-theme] 为 (0,1,1)，压过子站内联 :root 的 (0,1,0)；   │
 * │    且位于文件末尾，故对主站令牌层中的同名兼容别名形成最终覆盖。               │
 * └──────────────────────────────────────────────────────────────────────────┘ */
:root, html[data-theme] {

  /* ── 字体族：三站与主站统一（取值等同主站 styles.css:49-59 口径）── */
  --serif-cn: 'Noto Serif SC','Songti SC','Source Han Serif SC','Cormorant Garamond','Playfair Display',Georgia,serif;
  --serif-en: 'Cormorant Garamond','Playfair Display',Georgia,serif;
  --serif:    'Noto Serif SC','Songti SC','Source Han Serif SC','Cormorant Garamond','Playfair Display',Georgia,serif;
  --num:      'Cormorant Garamond',Didot,Georgia,serif;
  --sans:     'Inter','HarmonyOS Sans SC','MiSans','PingFang SC','Noto Sans SC','Source Han Sans SC','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:     'JetBrains Mono','SF Mono','Menlo','Consolas','Courier New',monospace;
  /* 主站变量名别名，供子站后续直接复用 */
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --font-display: var(--serif);
  --font-heading: var(--serif);
  --font-cin: 'Cinzel','Noto Serif SC',serif;
  --font-num: var(--num);
  --font-mono: var(--mono);

  /* ── 动效曲线 ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 品牌色 → 主站强调色（自动跟随 data-accent / data-skin）── */
  --brand:          var(--accent);
  --brand-light:    var(--accent-hover);
  --brand-2:        var(--accent-hover);
  --brand-3:        var(--brand-copper);
  --brand-glow:     var(--accent-soft);
  --brand-gradient: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 50%, var(--brand-copper) 100%);

  /* ── ★ 关键重定向 ──
     子站的 --ink 语义是「正文文字色」，而主站同名兼容别名 --ink 指向「背景色」，
     二者语义相反，这里必须显式纠正，否则子站正文会变成背景色而不可见。 */
  --ink:      var(--text-primary);
  --ink-soft: var(--text-secondary);
  --ink-2:    var(--text-secondary);
  --ink-3:    var(--text-muted);
  --ink-4:    var(--text-ghost);
  --gray:     var(--text-muted);

  /* ── 面 / 线 ── */
  --surface:      var(--bg-surface);
  --surface-2:    var(--bg-surface-2);
  --border:       var(--line);
  --border-light: var(--line-soft);

  /* ── 状态色 ── */
  --green:  var(--state-ok);
  --red:    var(--state-danger);
  --blue:   var(--state-info);
  --orange: var(--state-warn);

  /* ── 背景衍生 ── */
  --bg-warm:     var(--bg-base-alt);
  --bg-gradient: radial-gradient(ellipse at 20% 0%, var(--bg-base-alt) 0%, var(--bg-base) 55%);

  /* ── budget 站（原纸白浅色体系）语义映射 ── */
  --paper:     var(--bg-base);
  --white:     var(--bg-surface);
  --accent-bg: var(--accent-soft);
  --g1:  var(--text-strong);
  --g3:  var(--text-secondary);
  --g5:  var(--text-muted);
  --g7:  var(--line-strong);
  --g9:  var(--line);
  --g10: var(--bg-base-alt);
}

/* ── 3.1 全局基底兜底：确保子站 body 底色/文字色随令牌 ── */
html, body { background-color: var(--bg-base); color: var(--text-primary); }

/* ── 3.2 皮肤切换过渡（与主站 .skin-anim 一致）── */
html.skin-anim, html.skin-anim body {
  transition: background-color .7s ease, color .7s ease;
}