/* ==========================================================================
   郄泽然毕设 · 共用设计系统
   tokens.css —— 设计令牌层
   --------------------------------------------------------------------------
   统一底色：科技暗色（深空蓝黑）。7 站共用一套尺度与底色，
   只靠 --accent 色相区分品牌 —— 这是"统一但不雷同"的关键。

   两版主题：
     · 深海（默认）—— 主色板，冷冽科技感
     · 玄墨（deep）—— 更深、更沉，给需要"夜"质感的站

   对比度已由 tools/validate_all_themes.py 全项验证通过（WCAG AA 以上）。
   改动任何色值后必须重跑该脚本。

   关于「发光色」与「文字色的分工」：
     科技风的观感来自光，但霓虹色本身对比度低、不能直接当正文色。
     所以拆成两层：
       --accent      合规文字色，需满足 4.5:1
       --accent-glow 高亮色，**只用于装饰**（光晕/描边/渐变/进度条），
                     不受对比度约束，负责"亮起来"的观感
   ========================================================================== */

/* ---------- 字体载入 ----------
   @font-face 声明由 tools/build_site_fonts.py 按站生成到
   ./design-system/fonts.css —— 每站只声明自己实际带的那几个字体文件。
   各站 <head> 需引入：<link rel="stylesheet" href="./design-system/fonts.css">
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. 主题：深海（蓝黑）—— 创造侧默认基座
   ========================================================================== */
:root,
[data-theme='deep'] {
  color-scheme: dark;

  /* --- 底色：深空蓝黑，三层递进 --- */
  --bg:            #070A12;
  --bg-sunken:     #04060C;
  --surface:       #0E131F;
  --surface-2:     #151B2A;
  --surface-inset: #0B0F1A;

  /* --- 描边：冷调微光，不是灰线 --- */
  --line:          #1E2537;
  --line-strong:   #2E3850;
  --line-focus:    #38E8D0;

  /* --- 文字 --- */
  --ink:           #EAF0FC;
  --ink-2:         #AFBACE;
  --muted:         #7E8AA0;
  --faint:         #79859a;
  --on-accent:     #04121A;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #E8EEF9;
  --on-ink-surface: #070A12;

  /* --- 强调 --- */
  --accent:        #2FD4BE;
  --accent-hi:     #4FE8D4;
  --accent-lo:     #1FA894;
  --accent-soft:   #0C2626;
  --accent-line:   #1B4A48;
  --accent-glow:   #4DFFE4;

  /* --- 语义 --- */
  --success:       #34D399;
  --success-soft:  #08251C;
  --warn:          #FBBF4C;
  --warn-soft:     #2A1F08;
  --danger:        #FB7185;
  --danger-soft:   #2C0F16;
  --info:          #60A5FA;
  --info-soft:     #0C1B33;

  /* --- 阴影：暗色下几乎不可见，改用描边 + 冷光晕表达层次 --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, .7), 0 3px 10px rgba(0, 0, 0, .45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, .75), 0 8px 20px rgba(0, 0, 0, .5);
  /* 品牌光晕：科技感的来源，用于卡片悬浮/焦点/激活态 */
  --glow-sm: 0 0 12px color-mix(in srgb, var(--accent-glow) 22%, transparent);
  --glow-md: 0 0 24px color-mix(in srgb, var(--accent-glow) 26%, transparent);
  --glow-lg: 0 0 48px color-mix(in srgb, var(--accent-glow) 30%, transparent);
  /* --- 玻璃层：毛玻璃组件的底料 ---
     半透明度不能太低，否则玻璃背后的彩色内容会把文字淹掉；
     配合 saturate 让透过去的颜色不发灰（不发灰才有"高级"感）。 */
  --glass-bg:    color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-blur:  18px;
  --glass-sat:   165%;
  --glass-line:  color-mix(in srgb, var(--ink) 11%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 26%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #132033;
  --door-ink: #7fb8ff;

  /* --- 通用阴影别名：组件层统一用 --shadow-1/2，避免到处写具体值 --- */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-float: var(--shadow-lg);


  /* --- 字体角色：创造侧全部走无衬线 + 等宽，衬线只在需要"人文感"时保留 --- */
  --font-display: 'Geist', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
                  'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'PingFang SC',
                  'HarmonyOS Sans SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-serif:   'Noto Serif SC', Georgia, 'Songti SC', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 字重档位 */
  --fw-light:   300;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- 字距 --- */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-caps:     0.08em;
  --ls-num:     -0.01em;

  /* --- 圆角：科技感偏锐利，整体调小 --- */
  --r-2xs: 2px;
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-full: 999px;

  /* --- 间距 --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;

  /* --- 字号 --- */
  --t-display:  clamp(30px, 8.2vw, 40px);
  --t-h1:       clamp(24px, 6.4vw, 30px);
  --t-h2:       clamp(19px, 5.1vw, 23px);
  --t-h3:       17px;
  --t-body:     15px;
  --t-sm:       13px;
  --t-xs:       11.5px;
  --t-micro:    10.5px;

  --lh-display: 1.14;
  --lh-heading: 1.32;
  --lh-body:    1.72;
  --lh-tight:   1.45;

  /* --- 动效：共享曲线 --- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-in:    cubic-bezier(.55, .06, .68, .19);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 720ms;

  /* --- 层级 --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-loading: 600;

  /* --- 布局 --- */
  --app-max: 480px;
  --gutter: 16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tap-min: 44px;
  --header-h: 52px;
  --tabbar-h: 56px;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     机房蓝黑：胶片颗粒，细而匀
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .055;
  --grain-size: 140px;
}

/* ==========================================================================
   2. 主题：玄墨（近黑）—— 音纪
   ========================================================================== */
[data-theme='night'] {
  color-scheme: dark;

  --bg:            #05070D;
  --bg-sunken:     #020408;
  --surface:       #0A0E18;
  --surface-2:     #101624;
  --surface-inset: #070B14;

  --line:          #171D2C;
  --line-strong:   #262F44;
  --line-focus:    #38E8D0;

  --ink:           #E4EBF8;
  --ink-2:         #A6B2C8;
  --muted:         #76829A;
  --faint:         #758198;
  --on-accent:     #04121A;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #E2E9F7;
  --on-ink-surface: #05070D;

  --accent:        #2FD4BE;
  --accent-hi:     #4FE8D4;
  --accent-lo:     #1FA894;
  --accent-soft:   #0A2020;
  --accent-line:   #16403E;
  --accent-glow:   #4DFFE4;

  --success:       #34D399;
  --success-soft:  #072019;
  --warn:          #FBBF4C;
  --warn-soft:     #241B07;
  --danger:        #FB7185;
  --danger-soft:   #260D13;
  --info:          #60A5FA;
  --info-soft:     #0A1729;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .55);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, .75), 0 3px 10px rgba(0, 0, 0, .5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, .8), 0 8px 20px rgba(0, 0, 0, .55);
  --glow-sm: 0 0 12px color-mix(in srgb, var(--accent-glow) 20%, transparent);
  --glow-md: 0 0 24px color-mix(in srgb, var(--accent-glow) 24%, transparent);
  --glow-lg: 0 0 48px color-mix(in srgb, var(--accent-glow) 28%, transparent);
  /* --- 玻璃层：毛玻璃组件的底料 ---
     半透明度不能太低，否则玻璃背后的彩色内容会把文字淹掉；
     配合 saturate 让透过去的颜色不发灰（不发灰才有"高级"感）。 */
  --glass-bg:    color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-blur:  18px;
  --glass-sat:   165%;
  --glass-line:  color-mix(in srgb, var(--ink) 11%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 26%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #261a32;
  --door-ink: #d6a6f7;

  /* --- 通用阴影别名：组件层统一用 --shadow-1/2，避免到处写具体值 --- */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-float: var(--shadow-lg);


  --font-display: 'Geist', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
                  'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'PingFang SC',
                  'HarmonyOS Sans SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-serif:   'Noto Serif SC', Georgia, 'Songti SC', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     近黑：最细，暗场里颗粒一粗就脏
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .050;
  --grain-size: 120px;
}

/* ==========================================================================
   2.1 主题：生宣（暖纸）—— 生活侧
   ==========================================================================
   归家礼遇是"收房交付"，珠语是"手作温度"。这些内容长在深空蓝黑上，
   会读成"监控台"，不像"给业主/给朋友的东西"。
   所以底色本身参与叙事：暖白纸感，像请柬、像手作说明卡。
   ========================================================================== */
[data-theme='xuan'] {
  color-scheme: light;

  --bg:            #FAF7F1;
  --bg-sunken:     #F1EBE0;
  --surface:       #FFFFFF;
  --surface-2:     #F5F0E7;
  --surface-inset: #F8F4EC;

  --line:          #E8E1D4;
  --line-strong:   #D5CBB7;
  --line-focus:    #9E5D12;

  --ink:           #1A1712;
  --ink-2:         #4A4238;
  --muted:         #6B6153;
  --faint:         #756b5d;
  --on-accent:     #FFFFFF;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #241E17;
  --on-ink-surface: #FAF7F1;

  --accent:        #9E5D12;
  --accent-hi:     #B87A2A;
  --accent-lo:     #7A460C;
  --accent-soft:   #F7EFE4;
  --accent-line:   #E0CDAE;
  --accent-glow:   #C98A2E;

  --success:       #0F7A4F;
  --success-soft:  #E4F3EC;
  --warn:          #8A5A00;
  --warn-soft:     #FBF0D9;
  --danger:        #C0392B;
  --danger-soft:   #FBE9E6;
  --info:          #1A5FB4;
  --info-soft:     #E6EEF9;

  /* 浅色下阴影是主要层次手段，要真实、要柔；"发光"读不出来，改成极淡的色晕 */
  --shadow-xs: 0 1px 2px rgba(60, 50, 35, .06);
  --shadow-sm: 0 1px 3px rgba(60, 50, 35, .09), 0 1px 2px rgba(60, 50, 35, .05);
  --shadow-md: 0 4px 14px rgba(60, 50, 35, .10), 0 1px 3px rgba(60, 50, 35, .06);
  --shadow-lg: 0 12px 32px rgba(60, 50, 35, .13), 0 3px 10px rgba(60, 50, 35, .07);
  --shadow-xl: 0 24px 60px rgba(60, 50, 35, .16), 0 8px 20px rgba(60, 50, 35, .08);
  --glow-sm: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  --glow-md: 0 4px 16px color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-lg: 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);

  /* 浅色玻璃靠"白 + 模糊 + 细边"，不靠透明度压暗 */
  --glass-bg:    color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-blur:  16px;
  --glass-sat:   135%;
  --glass-line:  color-mix(in srgb, var(--ink) 8%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 14%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #1e130a;
  --door-ink: #b87a2a;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     生宣：纸纤维要看得见，全套里最重
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .075;
  --grain-size: 200px;
}

/* ==========================================================================
   2.2 主题：素笺（冷白）—— 润凯企业门户
   ==========================================================================
   企业门户需要"可信"，不需要"炫"。冷白比暖纸更克制，
   也更接近真实企业官网的做法。
   ========================================================================== */
[data-theme='sujian'] {
  color-scheme: light;

  --bg:            #F4F6F8;
  --bg-sunken:     #EAEEF3;
  --surface:       #FFFFFF;
  --surface-2:     #EEF2F7;
  --surface-inset: #F7F9FB;

  --line:          #DCE2EA;
  --line-strong:   #C6D0DC;
  --line-focus:    #1663CC;

  --ink:           #13171E;
  --ink-2:         #3F4854;
  --muted:         #616B7A;
  --faint:         #636d7c;
  --on-accent:     #FFFFFF;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #181D26;
  --on-ink-surface: #F4F6F8;

  --accent:        #1663CC;
  --accent-hi:     #2E7DE0;
  --accent-lo:     #114FA6;
  --accent-soft:   #E7EFF9;
  --accent-line:   #BCD3EE;
  --accent-glow:   #3B82D9;

  --success:       #0F7A4F;
  --success-soft:  #E3F2EB;
  --warn:          #8A5A00;
  --warn-soft:     #FAF0DA;
  --danger:        #C0392B;
  --danger-soft:   #FBE8E5;
  --info:          #1A5FB4;
  --info-soft:     #E5EDF9;

  --shadow-xs: 0 1px 2px rgba(24, 38, 56, .06);
  --shadow-sm: 0 1px 3px rgba(24, 38, 56, .09), 0 1px 2px rgba(24, 38, 56, .05);
  --shadow-md: 0 4px 14px rgba(24, 38, 56, .10), 0 1px 3px rgba(24, 38, 56, .06);
  --shadow-lg: 0 12px 32px rgba(24, 38, 56, .13), 0 3px 10px rgba(24, 38, 56, .07);
  --shadow-xl: 0 24px 60px rgba(24, 38, 56, .16), 0 8px 20px rgba(24, 38, 56, .08);
  --glow-sm: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  --glow-md: 0 4px 16px color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-lg: 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);

  --glass-bg:    color-mix(in srgb, var(--surface) 76%, transparent);
  --glass-blur:  16px;
  --glass-sat:   130%;
  --glass-line:  color-mix(in srgb, var(--ink) 8%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 13%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #091529;
  --door-ink: #438ae3;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     素笺：冷白纸，比生宣收一档
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .055;
  --grain-size: 160px;
}

/* ==========================================================================
   2.3 主题：至素（画廊白）—— 云试衣仓
   ==========================================================================
   试衣间的主角是**衣服和照片**，界面只能当墙。
   底色接近纯白、彩度压到最低，让服装照片自己说话 ——
   真实时尚电商（COS、Net-a-Porter）都走这个路子。
   ========================================================================== */
[data-theme='zhisu'] {
  color-scheme: light;

  --bg:            #FBFBF9;
  --bg-sunken:     #F0F0EC;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F2;
  --surface-inset: #FAFAF7;

  --line:          #E4E4E0;
  --line-strong:   #CFCFC9;
  --line-focus:    #2A2E35;

  --ink:           #101010;
  --ink-2:         #43433F;
  --muted:         #6A6A64;
  --faint:         #6f6f69;
  --on-accent:     #FFFFFF;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #141416;
  --on-ink-surface: #FBFBF9;

  --accent:        #2A2E35;
  --accent-hi:     #454B54;
  --accent-lo:     #16181D;
  --accent-soft:   #EFF0F1;
  --accent-line:   #D2D4D7;
  --accent-glow:   #5A6472;

  --success:       #0E7350;
  --success-soft:  #E2F1EA;
  --warn:          #855600;
  --warn-soft:     #F9EFD9;
  --danger:        #BA3729;
  --danger-soft:   #FAE7E4;
  --info:          #1857A8;
  --info-soft:     #E4EBF7;

  --shadow-xs: 0 1px 2px rgba(20, 20, 18, .05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 18, .08), 0 1px 2px rgba(20, 20, 18, .04);
  --shadow-md: 0 4px 14px rgba(20, 20, 18, .09), 0 1px 3px rgba(20, 20, 18, .05);
  --shadow-lg: 0 12px 32px rgba(20, 20, 18, .12), 0 3px 10px rgba(20, 20, 18, .06);
  --shadow-xl: 0 24px 60px rgba(20, 20, 18, .15), 0 8px 20px rgba(20, 20, 18, .07);
  --glow-sm: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  --glow-md: 0 4px 16px color-mix(in srgb, var(--accent) 14%, transparent);
  --glow-lg: 0 8px 32px color-mix(in srgb, var(--accent) 18%, transparent);

  --glass-bg:    color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-blur:  14px;
  --glass-sat:   125%;
  --glass-line:  color-mix(in srgb, var(--ink) 7%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 12%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #0a0a0e;
  --door-ink: #7d8187;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     至素：界面只是墙，颗粒不能抢衣服
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .040;
  --grain-size: 150px;
}

/* ==========================================================================
   2.4 主题：墨夜（暖褐）—— 礼·续
   ==========================================================================
   礼续是 NFC 数字礼品，内容里有茶、有礼盒、有"祝君好运"。
   深色是对的（本来就是"夜里拆礼物"的调子），但**不能是冷蓝**。
   暖褐的暗是茶汤和木桌的暗，和光屿的机房蓝黑完全是两种气质。
   ========================================================================== */
[data-theme='moye'] {
  color-scheme: dark;

  --bg:            #0C0A07;
  --bg-sunken:     #070604;
  --surface:       #14110C;
  --surface-2:     #1C1811;
  --surface-inset: #100D09;

  --line:          #262017;
  --line-strong:   #3A3124;
  --line-focus:    #D9B45C;

  --ink:           #F5EFE2;
  --ink-2:         #C4B9A4;
  --muted:         #948A78;
  --faint:         #8b8170;
  --on-accent:     #1A1206;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #F2EBDC;
  --on-ink-surface: #0C0A07;

  --accent:        #D9B45C;
  --accent-hi:     #E8C878;
  --accent-lo:     #B8923C;
  --accent-soft:   #241C0E;
  --accent-line:   #453718;
  --accent-glow:   #F0D288;

  --success:       #5FBF8A;
  --success-soft:  #0B2318;
  --warn:          #E8B44C;
  --warn-soft:     #241B08;
  --danger:        #F07A6A;
  --danger-soft:   #2A120E;
  --info:          #7FB0E8;
  --info-soft:     #0E1A28;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, .7), 0 3px 10px rgba(0, 0, 0, .45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, .75), 0 8px 20px rgba(0, 0, 0, .5);
  --glow-sm: 0 0 12px color-mix(in srgb, var(--accent-glow) 22%, transparent);
  --glow-md: 0 0 24px color-mix(in srgb, var(--accent-glow) 26%, transparent);
  --glow-lg: 0 0 48px color-mix(in srgb, var(--accent-glow) 30%, transparent);

  --glass-bg:    color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-blur:  18px;
  --glass-sat:   155%;
  --glass-line:  color-mix(in srgb, var(--ink) 11%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 26%, transparent);

  /* 开门动效：门板恒定压暗，保证"暗门→亮家"的反差 */
  --door-bg:  #2a2214;
  --door-ink: #e8c878;

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     墨夜：暖褐茶汤，颗粒偏粗才有"纸"的意思
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .065;
  --grain-size: 170px;
}

/* ==========================================================================
   2.5 主题：藕荷（玫瑰纸）—— 珠语
   ==========================================================================
   为什么不让它和归家共用"生宣"：
     归家是服务清单（卡片/图标/行），珠语是作品陈列（照片/珠子/展签）。
     结构不同、底色相同，翻到第二站会有"这不还是刚才那个站"的错觉 ——
     那正是用户说的"一点区别感都没有"。

   藕荷取自天然石自己的色域（粉晶 / 月光石 / 草莓晶），
   和归家的暖琥珀纸同属"暖"，但是另一种暖。
   ========================================================================== */
[data-theme='ouhe'] {
  color-scheme: light;

  --bg:            #FBF6F6;
  --bg-sunken:     #F2E9EA;
  --surface:       #FFFFFF;
  --surface-2:     #F6EFF0;
  --surface-inset: #F9F3F4;

  --line:          #EADFE1;
  --line-strong:   #D8C7CA;
  --line-focus:    #C02F6B;

  --ink:           #1C1416;
  --ink-2:         #4C3E42;
  --muted:         #6E5E62;
  --faint:         #77676B;
  --on-accent:     #FFFFFF;

  /* 反色浮层（Toast/Tooltip/徽标）：不能复用 --ink/--bg，
     那对令牌在浅色主题下语义是反的，会得到突兀的纯黑药丸 */
  --ink-surface:    #241A1D;
  --on-ink-surface: #FBF6F6;

  --accent:        #C02F6B;
  --accent-hi:     #D4527F;
  --accent-lo:     #9C2455;
  --accent-soft:   #F8E7EC;
  --accent-line:   #E8C2D2;
  --accent-glow:   #D4527F;

  --success:       #0F7A4F;
  --success-soft:  #E4F2EB;
  --warn:          #8A5A00;
  --warn-soft:     #FBF0DA;
  --danger:        #C0392B;
  --danger-soft:   #FBE9E6;
  --info:          #1A5FB4;
  --info-soft:     #E6EEF9;

  --shadow-xs: 0 1px 2px rgba(60, 40, 46, .06);
  --shadow-sm: 0 1px 3px rgba(60, 40, 46, .09), 0 1px 2px rgba(60, 40, 46, .05);
  --shadow-md: 0 4px 14px rgba(60, 40, 46, .10), 0 1px 3px rgba(60, 40, 46, .06);
  --shadow-lg: 0 12px 32px rgba(60, 40, 46, .13), 0 3px 10px rgba(60, 40, 46, .07);
  --shadow-xl: 0 24px 60px rgba(60, 40, 46, .16), 0 8px 20px rgba(60, 40, 46, .08);
  --glow-sm: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  --glow-md: 0 4px 16px color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-lg: 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);

  --glass-bg:    color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-blur:  16px;
  --glass-sat:   138%;
  --glass-line:  color-mix(in srgb, var(--ink) 8%, transparent);
  --glass-hi:    color-mix(in srgb, var(--ink) 14%, transparent);

  /* --- 颗粒（Grainient）：带颗粒的底，印刷品质感 ---
     藕荷：手作温度，介于生宣与素笺之间
     只给强度和尺度：纹理本身（胶片/纸纹两种 SVG）在
     components.css 里按主题族挂，不进令牌（data URI 不是设计决策）。 */
  --grain-op:   .060;
  --grain-size: 180px;
}

/* ==========================================================================
   3. 品牌色 —— 每站一个色相
   --------------------------------------------------------------------------
   一个关键约束：**同一色相在浅底和深底上不是同一个颜色**。
   #F0B84E 放在暖纸上只有 1.9:1，字根本读不出来；反过来 #9E5D12
   放在蓝黑上会糊成一团。所以品牌色分两套，按主题绑定 —— 不是偷懒，
   是浅底与深底的物理差异。

   浅底：压暗、降饱和，目标是"读得清"
   深底：提亮、加饱和，目标是"发得出光"
   两套都由 tools/validate_all_themes.py 验证（WCAG AA 以上）。
   ========================================================================== */

/* --- 3.1 浅色主题下的品牌色 --- */

/* 润凯 · 企业蓝（素笺） */
[data-theme='sujian'][data-brand='runkai'] {
  --accent: #1663CC; --accent-hi: #2E7DE0; --accent-lo: #114FA6;
  --accent-soft: #E7EFF9; --accent-line: #BCD3EE;
  --accent-glow: #3B82D9; --line-focus: #1663CC; --on-accent: #FFFFFF;
}
/* 归家礼遇 · 琥珀（生宣） */
[data-theme='xuan'][data-brand='guijia'] {
  --accent: #9E5D12; --accent-hi: #B87A2A; --accent-lo: #7A460C;
  --accent-soft: #F7EFE4; --accent-line: #E0CDAE;
  --accent-glow: #C98A2E; --line-focus: #9E5D12; --on-accent: #FFFFFF;
}
/* 珠语 · 品红（藕荷） */
[data-theme='ouhe'][data-brand='zhuyu'] {
  --accent: #C02F6B; --accent-hi: #D4527F; --accent-lo: #9C2455;
  --accent-soft: #F8E7EC; --accent-line: #E8C2D2;
  --accent-glow: #D4527F; --line-focus: #C02F6B; --on-accent: #FFFFFF;
}
/* 云试衣仓 · 墨黑（至素）—— 时尚站不该有彩色，让照片当主角 */
[data-theme='zhisu'][data-brand='atelier'] {
  --accent: #2A2E35; --accent-hi: #454B54; --accent-lo: #16181D;
  --accent-soft: #EFF0F1; --accent-line: #D2D4D7;
  --accent-glow: #5A6472; --line-focus: #2A2E35; --on-accent: #FFFFFF;
}

/* --- 3.2 深色主题下的品牌色（霓虹亮色，负责"发光"） --- */

/* 光屿·万算AI · 湛蓝（深海） */
[data-theme='deep'][data-brand='guangyu'] {
  --accent: #60A5FA; --accent-hi: #7FB8FF; --accent-lo: #4186D6;
  --accent-soft: #0A1729; --accent-line: #1B3355;
  --accent-glow: #85BEFF; --line-focus: #60A5FA; --on-accent: #04101F;
}
/* 音纪 · 霓紫（玄墨） */
[data-theme='night'][data-brand='yinji'] {
  --accent: #C48AF0; --accent-hi: #D6A6F7; --accent-lo: #A26BD0;
  --accent-soft: #1D1130; --accent-line: #3D2459;
  --accent-glow: #D9A8FF; --line-focus: #C48AF0; --on-accent: #150826;
}
/* 礼·续 · 暖金（墨夜）—— 茶汤与木桌的金，不是古铜 */
[data-theme='moye'][data-brand='lixu'] {
  --accent: #D9B45C; --accent-hi: #E8C878; --accent-lo: #B8923C;
  --accent-soft: #241C0E; --accent-line: #453718;
  --accent-glow: #F0D288; --line-focus: #D9B45C; --on-accent: #1A1206;
}

/* --- 3.3 兜底：主题未标注时，按站点给一个中性强调色 ---
   （互链卡片、独立预览等场景可能只带 data-brand 不带 data-theme） */
[data-brand='runkai']  { --accent: #1663CC; --accent-soft: #E7EFF9; --accent-line: #BCD3EE; }
[data-brand='guijia']  { --accent: #9E5D12; --accent-soft: #F7EFE4; --accent-line: #E0CDAE; }
[data-brand='zhuyu']   { --accent: #C02F6B; --accent-soft: #F7E8EE; --accent-line: #E8C2D2; }
[data-brand='atelier'] { --accent: #2A2E35; --accent-soft: #EFF0F1; --accent-line: #D2D4D7; }
[data-brand='lixu']    { --accent: #D9B45C; --accent-soft: #241C0E; --accent-line: #453718; }
[data-brand='guangyu'] { --accent: #60A5FA; --accent-soft: #0A1729; --accent-line: #1B3355; }
[data-brand='yinji']   { --accent: #C48AF0; --accent-soft: #1D1130; --accent-line: #3D2459; }

/* ==========================================================================
   4. 排版基元（跨站共享，避免每站重造）
   ========================================================================== */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}
.t-h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.t-sm  { font-size: var(--t-sm); line-height: var(--lh-body); color: var(--muted); }
.t-xs  { font-size: var(--t-xs); line-height: var(--lh-tight); color: var(--muted); }
.t-micro { font-size: var(--t-micro); line-height: var(--lh-tight); color: var(--faint); }

/* 数字：统一等宽，科技感的关键细节 */
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--ls-num);
  font-weight: var(--fw-medium);
}

/* 强调色文字（不要在正文里滥用，只用于链接与关键数字） */
.t-accent { color: var(--accent); }

/* 说明性小标 —— 不用全大写，中文没有大小写，用字距和字重区分 */
.t-label {
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  color: var(--faint);
}

/* ==========================================================================
   5. 无障碍与偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms;
    --ease-spring: linear;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度偏好 */
@media (prefers-contrast: more) {
  :root {
    --line: var(--line-strong);
    --muted: var(--ink-2);
    --faint: var(--muted);
  }
}

/* 强制色彩模式（Windows 高对比） */
@media (forced-colors: active) {
  * { border-color: currentColor; }
}