/* ============================================
   css/tokens.css
   Mucha Exhibition v7.1.17 OSS (v6 起源 + v7.1.x 暗色/优化增量)
   ============================================ */

/* ===================== 设计变量 ===================== */
:root{
  --ivory:#F4ECD8; --ivory-light:#FAF4E6; --ivory-deep:#E8DCC0;
  --gold:#B8860B; --gold-light:#D4AF37; --gold-bright:#FFD700; --gold-pale:#F4E4BC; --gold-deep:#6B4F0A;
  --ochre:#8B4513; --iris:#6B5B95; --rose:#C97B84; --ink:#2A1810;
  --spring:#8FBC8F; --spring-bright:#FFD966; --spring-pink:#F8C8DC;
  --summer:#228B22; --summer-gold:#D4AF37; --summer-orange:#FF8C00;
  --autumn:#8B4513; --autumn-gold:#B8860B; --autumn-red:#800020; --autumn-orange:#D2691E;
  --winter:#B0C4DE; --winter-silver:#E8E8E8; --winter-blue:#4A6B8A; --winter-grey:#708090;
  --diaochan-deep:#2A0A1A; --diaochan-rose:#8B2848;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family:'Noto Serif SC','Cormorant Garamond',serif;
  background:var(--ivory);color:var(--ink);
  overflow-x:hidden;
}



/* ============================================
   v7.1.8 暗色主题（鎏金 → 月银 adaptive · 一刀切版）
   60-30-10 配色：60% 暗夜蓝 / 30% 月银文字 / 10% 古铜金装饰
   关键：把 v6 鎏金 5 色变量在暗色下全部压成月银系
        这样 v6 所有用 var(--gold) 的标题/边框自动变月银
   ============================================ */
:root {
  /* RGB 变量用于动态合成 */
  --gold-rgb: 255, 215, 0;
  --gold-deep-rgb: 184, 134, 11;
  --ivory-rgb: 244, 236, 216;

  /* v7.1.15: --text-light 白天值（用户反映 anchor-nav / 章节元素白天看不清）
     白天 = #FAF4E6 浅米色（白天背景 --ivory-light 同色，作为 fallback 不会因未定义而失效）
     暗色 = #F0F6FC 月白（定义在 :root[data-theme="dark"]）
     用途：原本定义在 :root[data-theme="dark"] 的 --text-light 白天无法使用——
     v7.1.15 起白天也定义，所有 css 引用 var(--text-light) 白天黑夜都有效 */
  --text-light:  #FAF4E6;
}
:root[data-theme="dark"] {
  /* ===== 60% 背景：暗夜蓝系 ===== */
  --ivory:        #0F1B2A;  /* 主背景（深蓝近黑） */
  --ivory-light:  #1A2840;  /* 卡片底（暗夜蓝） */
  --ivory-deep:   #243A52;  /* 强调底（钢蓝） */
  --ink:          #E8DCC0;  /* 主文字：保留牙色（暖白易读） */

  /* v7.1.11：--text-light 暗色下月白（用作亮色文字，区别于卡片底 --ivory-light） */
  --text-light:   #F0F6FC;

  /* ===== 30% 文字/边框：月银 5 阶（最亮→最暗） ===== */
  --gold-bright:  #F0F6FC;  /* 1. 最亮（标题/数字高光） */
  --gold-pale:    #D8E5F0;  /* 2. 极淡月白（hover/装饰） */
  --gold-light:   #C0D0E0;  /* 3. 中月银（边框/次级文字） */
  --gold:         #A8C0D8;  /* 4. 主文字月银（替代 v6 鎏金） */
  --gold-deep:    #7A98B8;  /* 5. 弱化文字/边框 */

  /* v7.1.11：--text-light 暗色下月白（用于"亮色文字"，跟 --ivory-light 卡片底区分） */
  --text-light:   #F0F6FC;

  /* ===== 10% 装饰：古铜金（仅作 hover 阴影等小装饰） ===== */
  /* 用 --gold-ornament 表示真正的金色（不常用） */
  --gold-ornament: #C9A87C;

  /* ===== 季节 / 副色 月银化（保留视觉辨识度） ===== */
  --ochre:        #C9A87C;  /* 赭石 → 古铜 */
  --iris:         #A8B0D8;  /* 鸢尾紫 → 月紫 */
  --rose:         #D89BA3;  /* 玫瑰粉 → 暗粉 */
  --winter-silver: #B0B8C0; /* 冬银 → 钢银 */
  --diaochan-deep: #1A0810; /* VI section deep accent */
  --diaochan-rose: #B84860; /* VI section rose accent */

  /* RGB 变量跟着切（动态 alpha 合成） */
  --gold-rgb:     240, 246, 252;  /* 月银高光 RGB */
  --gold-deep-rgb: 122, 152, 184; /* 深月银 RGB */
  --ivory-rgb:    15, 27, 42;     /* 暗夜蓝 RGB */
}
body {
  /* 主题切换时背景色缓动 */
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ============================================
   鎏金粒子暗色覆盖（v6 鎏金粒子 CSS 一行不改）
   只在暗色模式下用更高优先级覆盖背景色
   ============================================ */
:root[data-theme="dark"] .gold-particle {
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold-pale) 50%, var(--winter-silver) 100%);
  filter: drop-shadow(0 0 8px rgba(232, 240, 250, 0.7));
}
:root[data-theme="dark"] .particle {
  filter: drop-shadow(0 0 6px rgba(232, 240, 250, 0.4));
}

/* ============================================
   cursor 鎏金繁花暗色覆盖（v6 cursor.css 一行不改）
   shadow 改月银
   ============================================ */
:root[data-theme="dark"] #cursor-flower {
  filter: drop-shadow(0 0 6px rgba(220, 232, 244, 0.6)) drop-shadow(0 0 12px rgba(180, 200, 220, 0.4));
}
:root[data-theme="dark"] #cursor-flower-follower {
  filter: drop-shadow(0 0 4px rgba(200, 220, 236, 0.4));
}

/* ============================================
   v7.1.7 鎏金元素暗色月银化（v6 base.css 一行不改）
   所有用 var(--gold-light) / var(--gold-bright) 的元素在 dark mode 下走月银
   ============================================ */

/* 鎏金文字：drop-shadow 月银 + 文字色月银 */
:root[data-theme="dark"] .gold-text,
:root[data-theme="dark"] .gold-text-cn {
  filter: drop-shadow(0 0 1px rgba(168, 192, 216, 0.6));
  color: var(--gold-light);
}

/* 鎏金按钮：边框月银 + 文字月银 + hover shadow 月银 */
:root[data-theme="dark"] .gold-btn {
  color: var(--gold-light);
  border: 1px solid var(--gold-light);
  background: transparent;
  box-shadow: 0 0 20px rgba(168, 192, 216, 0.15);
}
:root[data-theme="dark"] .gold-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 40px rgba(232, 240, 250, 0.4);
  background: rgba(168, 192, 216, 0.08);
  letter-spacing: 0.5em;
  transform: translateY(-2px);
}

/* 鎏金分隔条：边线月银 + symbol 月银 */
:root[data-theme="dark"] .gold-divider::before,
:root[data-theme="dark"] .gold-divider::after {
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
:root[data-theme="dark"] .gold-divider .symbol {
  color: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(168, 192, 216, 0.6));
}

/* 鎏金画框（角线）：月银 */
:root[data-theme="dark"] .gold-frame::before,
:root[data-theme="dark"] .gold-frame::after {
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .gold-frame > img,
:root[data-theme="dark"] .masterpiece-img,
:root[data-theme="dark"] .similar-img,
:root[data-theme="dark"] .aesthetic-img {
  border-color: var(--gold-light);
}

/* 章节边框（hero-frame / chapter-frame）：月银 */
:root[data-theme="dark"] .hero-frame,
:root[data-theme="dark"] .chapter-frame,
:root[data-theme="dark"] .curatorial-frame {
  border-color: var(--gold-light);
}

/* 章节标题 / 中文副标题：月银 */
:root[data-theme="dark"] .chapter-title,
:root[data-theme="dark"] .chapter-title-cn,
:root[data-theme="dark"] .masterpiece-title,
:root[data-theme="dark"] .masterpiece-title-cn,
:root[data-theme="dark"] .aesthetic-card h3,
:root[data-theme="dark"] .aesthetic-card-cn,
:root[data-theme="dark"] .similar-text h3,
:root[data-theme="dark"] .similar-cn,
:root[data-theme="dark"] .diaochan-title,
:root[data-theme="dark"] .diaochan-cn,
:root[data-theme="dark"] .season-title,
:root[data-theme="dark"] .season-cn {
  color: var(--gold-light);
}

/* 标签 / 卡片底：月银边框 */
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .project-intro-stat,
:root[data-theme="dark"] .aesthetic-card,
:root[data-theme="dark"] .masterpiece,
:root[data-theme="dark"] .season-card,
:root[data-theme="dark"] .code-card {
  border-color: var(--gold-light);
}

/* 表格 / list / wall-text 边框：月银 */
:root[data-theme="dark"] .reference-item,
:root[data-theme="dark"] .wall-text,
:root[data-theme="dark"] .critical-block,
:root[data-theme="dark"] .curatorial-arc-step,
:root[data-theme="dark"] .audio-script,
:root[data-theme="dark"] .floorplan-room,
:root[data-theme="dark"] .code-card {
  border-color: var(--gold-light);
}
:root[data-theme="dark"] table th,
:root[data-theme="dark"] table td {
  border-color: var(--gold-deep);
}

/* 输入 / lightbox 控件 / nav 边框：月银 */
:root[data-theme="dark"] .lightbox-btn,
:root[data-theme="dark"] .lightbox-close,
:root[data-theme="dark"] .lightbox-caption,
:root[data-theme="dark"] .mobile-nav,
:root[data-theme="dark"] .mobile-nav-menu a,
:root[data-theme="dark"] #anchor-nav a,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
:root[data-theme="dark"] #anchor-nav a:hover,
:root[data-theme="dark"] #anchor-nav a.active {
  color: var(--gold-bright);
  background: rgba(168, 192, 216, 0.1);
}

/* 切换按钮（theme-toggle / lang-toggle）：月银 */
:root[data-theme="dark"] #theme-toggle,
:root[data-theme="dark"] #lang-toggle {
  background: rgba(168, 192, 216, 0.06);
  border-color: var(--gold-light);
  color: var(--gold-light);
}
:root[data-theme="dark"] #theme-toggle:hover,
:root[data-theme="dark"] #lang-toggle:hover {
  background: rgba(168, 192, 216, 0.12);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* 鎏金装饰元素（rosette、chapter-decor-top、gold-divider-symbol）：月银 */
/* v7.1.15: 用户反映"十字花未在黑夜模式下正确变色"——
   旧版只改 border-color + color（无效，因为 rosette 用 background-image:url(SVG with #FFD700/#B8860B)）
   现在加 filter: hue-rotate(195deg) saturate(0.4) brightness(1.5) 强制把 SVG 内的鎏金渐变变月银
   只覆盖鎏金 rosette / decor，**不**覆盖粉红色 .diaochan-rosette（v6 源包设计是粉红，无需变月银） */
:root[data-theme="dark"] .gold-rosette,
:root[data-theme="dark"] .code-section-rosette,
:root[data-theme="dark"] .sig-rosette,
:root[data-theme="dark"] .critical-essay-rosette,
:root[data-theme="dark"] .chapter-decor-top,
:root[data-theme="dark"] .chapter-decor-bottom {
  border-color: var(--gold-light);
  color: var(--gold-light);
  filter: hue-rotate(195deg) saturate(0.4) brightness(1.5);
}
:root[data-theme="dark"] .chapter-num {
  /* v7.1.14: 用户要求"不要被明暗切换而改变"——删 v7.1.12 改的 var(--text-light) + opacity 0.45
     保留 v6 源包默认 var(--gold) + opacity 0.25 (暗色下 var(--gold)=#A8C0D8 月银) */
  /* 不动 v6 源包默认 .chapter-num var(--gold) opacity 0.25 —— 白天黑夜一致 */
}

/* v7.1.16: 锚点导航符号(圆点 ::before)暗色月银
   注:这里**只**覆盖 ::before(::after 是 data-label 弹字,nav.css:48 已设 background:none 保持透明)
   v7.1.15 旧版误把 ::after 也一起覆盖,导致黑夜模式 hover 弹字带月白矩形背景 */
:root[data-theme="dark"] #anchor-nav a::before {
  background: var(--gold-light);
}

/* 鎏金斜体签名（signature-art）：月银版 */
:root[data-theme="dark"] .signature-art-zh,
:root[data-theme="dark"] .signature-art-en {
  color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(232, 240, 250, 0.4);
  background: linear-gradient(90deg, #5A7A98 0%, #E8F0FA 50%, #5A7A98 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* end.css 鎏金线：月银 */
:root[data-theme="dark"] .making-of-image,
:root[data-theme="dark"] .signature-art {
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .making-of-image::before,
:root[data-theme="dark"] .making-of-image::after,
:root[data-theme="dark"] .signature-art-flourish {
  border-color: var(--gold-light);
}

/* lightbox.css 鎏金控件：月银 */
:root[data-theme="dark"] .lightbox-counter,
:root[data-theme="dark"] .lightbox-caption {
  color: var(--gold-light);
}

/* critical-essay.css 暗色增强可读性 */
:root[data-theme="dark"] .critical-essay-section {
  background: rgba(36, 58, 82, 0.4);
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .critical-num,
:root[data-theme="dark"] .critical-title-en {
  color: var(--gold-light);
  opacity: 0.85;
}
:root[data-theme="dark"] .critical-title {
  filter: drop-shadow(0 0 20px rgba(232, 240, 250, 0.6));
}
:root[data-theme="dark"] .critical-block {
  background: linear-gradient(90deg, rgba(168, 192, 216, 0.08), transparent 60%);
  border-left-color: var(--gold-light);
}
:root[data-theme="dark"] .critical-block-title {
  color: var(--gold-bright);
}
:root[data-theme="dark"] .critical-block-body {
  color: var(--ink);
}
:root[data-theme="dark"] .critical-body,
:root[data-theme="dark"] .critical-block-body {
  color: var(--gold-pale);
}
:root[data-theme="dark"] .critical-body strong,
:root[data-theme="dark"] .critical-block-body strong {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-light);
}
:root[data-theme="dark"] .curatorial-arc-step {
  background: rgba(36, 58, 82, 0.5);
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .curatorial-arc-step .step-num,
:root[data-theme="dark"] .curatorial-arc-step .step-cn {
  color: var(--gold-bright);
}
:root[data-theme="dark"] .curatorial-arc-step .step-en {
  color: var(--gold-light);
}

/* ============================================
   v7.1.7 全局去蓝色 outline（鎏金设计不需要浏览器默认 focus ring）
   替换为鎏金光晕；保留 :focus-visible 键盘可达性
   ============================================ */
*:focus { outline: none; }
*:focus:not(:focus-visible) { box-shadow: none; }
a, button, input, textarea, select, [tabindex] {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 12px rgba(255, 215, 0, 0.5);
}
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] [tabindex]:focus-visible {
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 12px rgba(232, 240, 250, 0.5);
}

/* ============================================
   v7.1.12 暗色增强：audio script / 4 季段 / chapter 蒙层
   ============================================ */
/* 导览词脚本：暗色下背景更深 + 文字月白 */
:root[data-theme="dark"] .audio-script {
  background: linear-gradient(135deg, rgba(36, 58, 82, 0.5), rgba(15, 27, 42, 0.3));
  border-left-color: var(--gold-bright);
}
:root[data-theme="dark"] .audio-script-time {
  color: var(--gold-bright);
}
:root[data-theme="dark"] .audio-script-line {
  color: var(--text-light);
}