/**
 * 521 · 多主题变量与氛围层覆写
 * 全站须加载 theme.js + 本文件；切换时 html[data-theme="…"]
 */

/* 默认丝绒玫瑰 · 全站 design token（首页无 style.css 时也生效） */
:root {
  --bg-night: #0c060a;
  --bg-wine: #1a0a12;
  --bg-plum: #2a1020;
  --gold: #f2ddb8;
  --gold-dim: #d4a86a;
  --gold-glow: rgba(242, 221, 184, 0.45);
  --pink: #f0b8c8;
  --blush: #f8d4e0;
  --rose: #e87898;
  --rose-deep: #c44a6a;
  --champagne: #ffe8d0;
  --accent: #e890a8;
  --paper: #fff9f6;
  --ink: #3d1828;
  --seal: #c43858;
  --glass: rgba(42, 16, 32, 0.72);
  --glass-light: rgba(255, 249, 246, 0.08);
  --glass-border: rgba(242, 221, 184, 0.32);
  --text: #fff8f5;
  --text-soft: rgba(255, 248, 252, 0.78);
  --text-muted: rgba(255, 240, 248, 0.52);
}

/* —— 碧玉镜湖 —— */
[data-theme='jade-lake'] {
  --bg-night: #061418;
  --bg-wine: #0a201c;
  --bg-plum: #123028;
  --gold: #d4e8c8;
  --gold-dim: #8ab89a;
  --gold-glow: rgba(212, 232, 200, 0.4);
  --pink: #7ec8b8;
  --blush: #b8e8d8;
  --rose: #3a9a88;
  --rose-deep: #2a7a6a;
  --champagne: #e8f4e0;
  --accent: #5ab8a0;
  --paper: #f4faf6;
  --ink: #0a2820;
  --seal: #2a8a7a;
  --glass: rgba(18, 48, 40, 0.65);
  --glass-border: rgba(180, 220, 200, 0.32);
  --text: #f0faf4;
  --text-soft: rgba(232, 248, 240, 0.78);
  --text-muted: rgba(200, 230, 220, 0.52);
  --aurora-rose-a: rgba(90, 184, 160, 0.55);
  --aurora-rose-b: rgba(42, 138, 122, 0.22);
  --aurora-gold-a: rgba(180, 220, 200, 0.35);
  --aurora-gold-b: rgba(120, 180, 150, 0.12);
  --heart-stroke: rgba(90, 184, 160, 0.08);
  --vignette-base: #061418;
}

/* —— 星河夜宴 —— */
[data-theme='starry-night'] {
  --bg-night: #0a0818;
  --bg-wine: #12102a;
  --bg-plum: #1a1840;
  --gold: #c8d4f0;
  --gold-dim: #8898c8;
  --gold-glow: rgba(200, 212, 240, 0.42);
  --pink: #a8b8f0;
  --blush: #d0d8f8;
  --rose: #8b7cf0;
  --rose-deep: #6b5ce6;
  --champagne: #e8ecff;
  --accent: #9b8cf8;
  --paper: #f4f6ff;
  --ink: #181430;
  --seal: #6b5ce6;
  --glass: rgba(26, 24, 64, 0.68);
  --glass-border: rgba(180, 190, 240, 0.28);
  --text: #f4f6ff;
  --text-soft: rgba(228, 232, 255, 0.8);
  --text-muted: rgba(180, 190, 230, 0.5);
  --aurora-rose-a: rgba(139, 124, 240, 0.5);
  --aurora-rose-b: rgba(107, 92, 230, 0.22);
  --aurora-gold-a: rgba(160, 180, 240, 0.32);
  --aurora-gold-b: rgba(100, 120, 200, 0.1);
  --heart-stroke: rgba(139, 124, 240, 0.07);
  --vignette-base: #0a0818;
}

/* —— 桃夭春色 —— */
[data-theme='peach-blossom'] {
  --bg-night: #1a1014;
  --bg-wine: #281820;
  --bg-plum: #382428;
  --gold: #ffe8e0;
  --gold-dim: #f0c0b0;
  --gold-glow: rgba(255, 232, 224, 0.45);
  --pink: #ffc8d8;
  --blush: #ffe0e8;
  --rose: #f0a0b0;
  --rose-deep: #e07898;
  --champagne: #fff4f0;
  --accent: #f8b8c8;
  --paper: #fff9f6;
  --ink: #482830;
  --seal: #e07898;
  --glass: rgba(56, 36, 40, 0.58);
  --glass-border: rgba(255, 220, 210, 0.35);
  --text: #fff8f6;
  --text-soft: rgba(255, 244, 240, 0.82);
  --text-muted: rgba(255, 220, 210, 0.55);
  --aurora-rose-a: rgba(255, 180, 200, 0.5);
  --aurora-rose-b: rgba(240, 140, 170, 0.2);
  --aurora-gold-a: rgba(255, 232, 220, 0.38);
  --aurora-gold-b: rgba(240, 200, 180, 0.14);
  --heart-stroke: rgba(255, 180, 200, 0.07);
  --vignette-base: #1a1014;
}

/* —— 宫灯绛焰 —— */
[data-theme='lantern-red'] {
  --bg-night: #180808;
  --bg-wine: #280c0c;
  --bg-plum: #381010;
  --gold: #ffd54f;
  --gold-dim: #e8b030;
  --gold-glow: rgba(255, 213, 79, 0.45);
  --pink: #ff8a80;
  --blush: #ffcdd2;
  --rose: #ef5350;
  --rose-deep: #c62828;
  --champagne: #fff8e0;
  --accent: #ff7043;
  --paper: #fffaf0;
  --ink: #3d1010;
  --seal: #c62828;
  --glass: rgba(56, 16, 16, 0.7);
  --glass-border: rgba(255, 213, 79, 0.35);
  --text: #fff8f0;
  --text-soft: rgba(255, 240, 230, 0.82);
  --text-muted: rgba(255, 200, 180, 0.52);
  --aurora-rose-a: rgba(239, 83, 80, 0.55);
  --aurora-rose-b: rgba(198, 40, 40, 0.25);
  --aurora-gold-a: rgba(255, 213, 79, 0.4);
  --aurora-gold-b: rgba(232, 176, 48, 0.15);
  --heart-stroke: rgba(239, 83, 80, 0.08);
  --vignette-base: #180808;
}

/* —— 月华银霜 —— */
[data-theme='moonlit-silver'] {
  --bg-night: #0c1018;
  --bg-wine: #141c28;
  --bg-plum: #1c2838;
  --gold: #e8eef5;
  --gold-dim: #a8b8c8;
  --gold-glow: rgba(232, 238, 245, 0.4);
  --pink: #b8c8e0;
  --blush: #d8e4f0;
  --rose: #7a9ab8;
  --rose-deep: #5a7a98;
  --champagne: #f0f4f8;
  --accent: #98b0c8;
  --paper: #f8fafc;
  --ink: #1a2838;
  --seal: #5a7a98;
  --glass: rgba(28, 40, 56, 0.68);
  --glass-border: rgba(200, 212, 228, 0.3);
  --text: #f4f8fc;
  --text-soft: rgba(228, 236, 248, 0.8);
  --text-muted: rgba(180, 200, 220, 0.52);
  --aurora-rose-a: rgba(122, 154, 184, 0.45);
  --aurora-rose-b: rgba(90, 122, 152, 0.2);
  --aurora-gold-a: rgba(200, 220, 240, 0.35);
  --aurora-gold-b: rgba(140, 170, 200, 0.12);
  --heart-stroke: rgba(180, 200, 230, 0.07);
  --vignette-base: #0c1018;
}

/* —— 落日余晖 —— */
[data-theme='sunset-glow'] {
  --bg-night: #181008;
  --bg-wine: #281810;
  --bg-plum: #382018;
  --gold: #ffd8a8;
  --gold-dim: #e8b070;
  --gold-glow: rgba(255, 216, 168, 0.45);
  --pink: #ffc8a0;
  --blush: #ffe0c0;
  --rose: #e87850;
  --rose-deep: #d05830;
  --champagne: #fff0e0;
  --accent: #f0a060;
  --paper: #fff8f0;
  --ink: #402818;
  --seal: #d05830;
  --glass: rgba(56, 32, 24, 0.65);
  --glass-border: rgba(255, 216, 168, 0.32);
  --text: #fff8f0;
  --text-soft: rgba(255, 244, 232, 0.8);
  --text-muted: rgba(255, 220, 190, 0.52);
  --aurora-rose-a: rgba(248, 140, 90, 0.52);
  --aurora-rose-b: rgba(224, 100, 60, 0.22);
  --aurora-gold-a: rgba(255, 216, 168, 0.4);
  --aurora-gold-b: rgba(232, 176, 100, 0.14);
  --heart-stroke: rgba(248, 140, 90, 0.08);
  --vignette-base: #181008;
}

/* —— 水墨丹青 —— */
[data-theme='ink-wash'] {
  --bg-night: #121210;
  --bg-wine: #1a1816;
  --bg-plum: #242220;
  --gold: #e8e0d0;
  --gold-dim: #b8a890;
  --gold-glow: rgba(232, 224, 208, 0.38);
  --pink: #c8b8a8;
  --blush: #e0d8c8;
  --rose: #a07078;
  --rose-deep: #8b4048;
  --champagne: #f4f0e8;
  --accent: #b89098;
  --paper: #faf8f4;
  --ink: #282420;
  --seal: #8b4048;
  --glass: rgba(36, 34, 32, 0.72);
  --glass-border: rgba(200, 190, 170, 0.28);
  --text: #f4f0e8;
  --text-soft: rgba(232, 228, 220, 0.78);
  --text-muted: rgba(180, 170, 160, 0.5);
  --aurora-rose-a: rgba(160, 112, 120, 0.4);
  --aurora-rose-b: rgba(139, 64, 72, 0.18);
  --aurora-gold-a: rgba(200, 190, 170, 0.28);
  --aurora-gold-b: rgba(140, 130, 110, 0.1);
  --heart-stroke: rgba(160, 112, 120, 0.06);
  --vignette-base: #121210;
}

/* 默认丝绒玫瑰 · 氛围变量（与 style.css 硬编码对齐） */
:root,
[data-theme='velvet-rose'] {
  --aurora-rose-a: rgba(232, 120, 160, 0.55);
  --aurora-rose-b: rgba(196, 56, 88, 0.2);
  --aurora-gold-a: rgba(242, 221, 184, 0.35);
  --aurora-gold-b: rgba(212, 168, 106, 0.12);
  --heart-stroke: rgba(232, 120, 160, 0.06);
  --vignette-base: #0c060a;
}

.scene-bg__aurora--rose {
  background: radial-gradient(
    circle,
    var(--aurora-rose-a) 0%,
    var(--aurora-rose-b) 45%,
    transparent 70%
  );
}

.scene-bg__aurora--gold {
  background: radial-gradient(
    circle,
    var(--aurora-gold-a) 0%,
    var(--aurora-gold-b) 50%,
    transparent 72%
  );
}

.scene-bg__heart::before {
  -webkit-text-stroke: 1px var(--heart-stroke);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pink) 12%, transparent) 0%,
    color-mix(in srgb, var(--rose-deep) 4%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.scene-bg__vignette {
  background:
    radial-gradient(
      ellipse 85% 70% at 50% 35%,
      transparent 25%,
      color-mix(in srgb, var(--vignette-base) 88%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vignette-base) 55%, transparent) 0%,
      transparent 22%,
      transparent 78%,
      color-mix(in srgb, var(--vignette-base) 92%, transparent) 100%
    );
}

.my-overlay {
  background: linear-gradient(
    168deg,
    var(--bg-night) 0%,
    var(--bg-wine) 38%,
    var(--bg-plum) 100%
  );
}

/* —— 晨曦雾白（亮） —— */
[data-theme='dawn-mist'] {
  --bg-night: #faf8f4;
  --bg-wine: #f5f0e8;
  --bg-plum: #ebe4d8;
  --gold: #b88850;
  --gold-dim: #9a7040;
  --gold-glow: rgba(184, 136, 80, 0.35);
  --pink: #e8b8c8;
  --blush: #f8e0e8;
  --rose: #c44a6a;
  --rose-deep: #a83858;
  --champagne: #5a4030;
  --accent: #d06078;
  --paper: #fffdf8;
  --ink: #3a2820;
  --seal: #c44a6a;
  --glass: rgba(255, 252, 246, 0.82);
  --glass-border: rgba(184, 136, 80, 0.28);
  --text: #3a2820;
  --text-soft: rgba(58, 40, 32, 0.82);
  --text-muted: rgba(90, 70, 58, 0.58);
  --aurora-rose-a: rgba(212, 120, 140, 0.28);
  --aurora-rose-b: rgba(196, 74, 106, 0.12);
  --aurora-gold-a: rgba(232, 200, 160, 0.45);
  --aurora-gold-b: rgba(184, 136, 80, 0.15);
  --heart-stroke: rgba(196, 74, 106, 0.08);
  --vignette-base: #faf8f4;
}

/* —— 樱昼清露（亮） —— */
[data-theme='sakura-day'] {
  --bg-night: #fff8fa;
  --bg-wine: #fff0f4;
  --bg-plum: #ffe8f0;
  --gold: #c87888;
  --gold-dim: #b06070;
  --gold-glow: rgba(232, 120, 152, 0.32);
  --pink: #ffc8d8;
  --blush: #ffe0e8;
  --rose: #e87898;
  --rose-deep: #d06078;
  --champagne: #6a3848;
  --accent: #f090a8;
  --paper: #fffbfc;
  --ink: #4a2830;
  --seal: #d06078;
  --glass: rgba(255, 248, 252, 0.85);
  --glass-border: rgba(232, 120, 152, 0.28);
  --text: #4a2830;
  --text-soft: rgba(74, 40, 48, 0.82);
  --text-muted: rgba(120, 80, 90, 0.55);
  --aurora-rose-a: rgba(240, 160, 176, 0.35);
  --aurora-rose-b: rgba(224, 120, 152, 0.14);
  --aurora-gold-a: rgba(255, 200, 216, 0.5);
  --aurora-gold-b: rgba(232, 120, 152, 0.12);
  --heart-stroke: rgba(224, 120, 152, 0.08);
  --vignette-base: #fff8fa;
}

/* —— 云霄碧玉（亮） —— */
[data-theme='cloud-jade'] {
  --bg-night: #f4faf8;
  --bg-wine: #e8f4f0;
  --bg-plum: #d8ece4;
  --gold: #3a8a78;
  --gold-dim: #2a7a68;
  --gold-glow: rgba(58, 138, 120, 0.28);
  --pink: #a8e0d0;
  --blush: #c8f0e4;
  --rose: #2a9a88;
  --rose-deep: #1a7a6a;
  --champagne: #1a5048;
  --accent: #4ab8a0;
  --paper: #f8fffc;
  --ink: #1a3830;
  --seal: #2a8a7a;
  --glass: rgba(244, 250, 248, 0.88);
  --glass-border: rgba(58, 138, 120, 0.25);
  --text: #1a3830;
  --text-soft: rgba(26, 56, 48, 0.82);
  --text-muted: rgba(60, 100, 88, 0.55);
  --aurora-rose-a: rgba(74, 184, 160, 0.3);
  --aurora-rose-b: rgba(42, 138, 122, 0.12);
  --aurora-gold-a: rgba(168, 224, 208, 0.45);
  --aurora-gold-b: rgba(58, 138, 120, 0.1);
  --heart-stroke: rgba(42, 138, 122, 0.07);
  --vignette-base: #f4faf8;
}

/* —— 杏霞晴空（亮） —— */
[data-theme='apricot-sky'] {
  --bg-night: #fffaf4;
  --bg-wine: #fff4e8;
  --bg-plum: #ffe8d4;
  --gold: #c87840;
  --gold-dim: #a86030;
  --gold-glow: rgba(232, 120, 80, 0.3);
  --pink: #ffd0a8;
  --blush: #ffe8c8;
  --rose: #e87850;
  --rose-deep: #d06040;
  --champagne: #6a4028;
  --accent: #f0a060;
  --paper: #fffdf8;
  --ink: #4a3020;
  --seal: #d06040;
  --glass: rgba(255, 250, 244, 0.86);
  --glass-border: rgba(200, 120, 64, 0.28);
  --text: #4a3020;
  --text-soft: rgba(74, 48, 32, 0.82);
  --text-muted: rgba(120, 80, 56, 0.55);
  --aurora-rose-a: rgba(240, 160, 96, 0.32);
  --aurora-rose-b: rgba(232, 120, 80, 0.12);
  --aurora-gold-a: rgba(255, 216, 168, 0.48);
  --aurora-gold-b: rgba(200, 120, 64, 0.12);
  --heart-stroke: rgba(232, 120, 80, 0.07);
  --vignette-base: #fffaf4;
}

/* 主题切换时 · 首页 hub 变量桥接 */
/* 茶肆卡片 · 亮色主题下「热」标文字对比度 */
html[data-tone='light'] .tea-card__badge--hot,
html[data-tone='light'] .hub-forum-embed .tea-card__badge--hot,
html[data-tone='light'] .tea-chip--hot,
html[data-tone='light'] .hub-forum-embed .tea-chip--hot {
  color: var(--ink);
}

html[data-theme] {
  --hub-bg: var(--bg-night);
  --hub-bg-mid: var(--bg-wine);
  --hub-bg-plum: var(--bg-plum);
  --hub-gold: var(--gold);
  --hub-gold-dim: var(--gold-dim);
  --hub-gold-soft: color-mix(in srgb, var(--gold) 38%, transparent);
  --hub-gold-glow: color-mix(in srgb, var(--gold) 14%, transparent);
  --hub-rose: var(--rose);
  --hub-rose-deep: var(--rose-deep);
  --hub-rose-soft: color-mix(in srgb, var(--rose) 28%, transparent);
  --hub-blush: var(--blush);
  --hub-champagne: var(--champagne);
  --hub-accent: var(--accent);
  --hub-accent-dim: var(--rose-deep);
  --hub-text: var(--text);
  --hub-text-soft: var(--text-soft);
  --hub-muted: var(--text-muted);
  --hub-border: var(--glass-border);
  --hub-border-strong: color-mix(in srgb, var(--gold) 36%, transparent);
  --hub-surface: var(--glass);
  --hub-surface-2: color-mix(in srgb, var(--text) 7%, transparent);
  --hub-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 35%, transparent);
  --hub-shadow-rose: 0 12px 36px color-mix(in srgb, var(--rose-deep) 18%, transparent);
}

html[data-tone='light'] body.hub-page .hub-bg {
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 25%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 0% 75%, color-mix(in srgb, var(--rose-deep) 8%, transparent), transparent 48%),
    linear-gradient(175deg, var(--hub-bg) 0%, var(--hub-bg-mid) 38%, var(--hub-bg-plum) 68%, var(--hub-bg) 100%);
}

html[data-tone='light'] body.hub-page .hub-bg__grid {
  opacity: 0.055;
}

html[data-tone='light'] body.hub-page .hub-btn-my__ring {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--rose) 15%, transparent), inset 0 0 8px var(--hub-gold-glow);
}

html[data-tone='light'] body.hub-page .hub-pnav--dock {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--hub-gold) 12%, transparent);
}

/* —— 全站：子页 body 背景随主题 —— */
html[data-theme] body.hub-page,
html[data-theme] body.tea-page,
html[data-theme] body.tea-post-page,
html[data-theme] body.tea-compose-page,
html[data-theme] body.evt-page {
  background-color: var(--hub-bg);
  color: var(--hub-text);
  transition: background-color 0.45s ease, color 0.35s ease;
}

html[data-theme] body.my-page {
  background-color: var(--bg-night);
  color: var(--text);
  transition: background-color 0.45s ease, color 0.35s ease;
}

/* —— 小游戏厅 · 顶栏与卡片 —— */
html[data-theme] .arena-game-tabs {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hub-bg-plum) 88%, transparent),
    color-mix(in srgb, var(--hub-bg-mid) 85%, transparent)
  );
  border-color: var(--hub-border-strong);
}

html[data-theme] .tea-toast {
  background: color-mix(in srgb, var(--hub-bg, var(--bg-night)) 92%, transparent);
  border-color: color-mix(in srgb, var(--hub-rose) 35%, transparent);
  color: var(--hub-text);
}

/* —— 我的浮层 · 活动/卡片硬编码兜底覆写 —— */
html[data-theme] .activity-card {
  border-color: var(--glass-border);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--glass) 92%, transparent),
    color-mix(in srgb, var(--bg-night) 95%, transparent)
  );
}

html[data-theme] .activity-card--feature {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rose-deep) 12%, transparent),
    0 18px 52px color-mix(in srgb, var(--rose-deep) 18%, transparent);
}

html[data-theme] .my-hub-v2__hero {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--rose-deep) 14%, transparent),
    color-mix(in srgb, var(--glass) 88%, transparent)
  );
  border-color: var(--glass-border);
}

html[data-theme] .my-hub-v2__stat,
html[data-theme] .my-hub-v2__row,
html[data-theme] .my-hub-v2__panel {
  border-color: var(--glass-border);
  background: color-mix(in srgb, var(--glass) 55%, transparent);
}

html[data-theme] .settings-auth-portal__card {
  border-color: var(--glass-border);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--glass) 90%, transparent),
    color-mix(in srgb, var(--bg-night) 92%, transparent)
  );
}

/* —— 开心模式 · 全站主题 → --hm-* 桥接 —— */
:root {
  --hm-bg: var(--bg-night, #0c060a);
  --hm-bg-2: var(--bg-wine, #1a0a12);
  --hm-sky: color-mix(in srgb, var(--accent, #e890a8) 42%, var(--gold, #f2ddb8) 58%);
  --hm-peach: var(--pink, #f0b8c8);
  --hm-rose: var(--rose, #e87898);
  --hm-rose-deep: var(--rose-deep, #c44a6a);
  --hm-gold: var(--gold-dim, #d4a86a);
  --hm-mint: color-mix(in srgb, var(--accent, #e890a8) 55%, var(--gold, #f2ddb8) 45%);
  --hm-text: var(--text, #fff8f5);
  --hm-text-soft: var(--text-soft, rgba(255, 248, 252, 0.78));
  --hm-line: color-mix(in srgb, var(--text, #fff8f5) 12%, transparent);
  --hm-glass: color-mix(in srgb, var(--glass, rgba(42, 16, 32, 0.72)) 88%, transparent);
  --hm-glass-strong: color-mix(in srgb, var(--glass, rgba(42, 16, 32, 0.72)) 72%, var(--paper, #fff9f6) 28%);
  --hm-shadow: 0 16px 40px color-mix(in srgb, var(--rose-deep, #c44a6a) 14%, transparent);
  --hm-on-accent: var(--paper, #fff9f6);
  --hm-live: var(--seal, #c43858);
  --hm-veil-glow-a: color-mix(in srgb, var(--pink) 48%, transparent);
  --hm-veil-glow-b: color-mix(in srgb, var(--accent) 38%, transparent);
  --hm-veil-top: color-mix(in srgb, var(--bg-night) 90%, transparent);
  --hm-veil-mid: color-mix(in srgb, var(--bg-wine) 92%, transparent);
  --hm-veil-room-top: color-mix(in srgb, var(--bg-night) 48%, transparent);
  --hm-veil-room-mid: color-mix(in srgb, var(--bg-wine) 62%, transparent);
  --hm-veil-room-bot: color-mix(in srgb, var(--ink) 55%, transparent);
  /* 房间内 · tint / 表面 / 阵营 */
  --hm-rose-tint-06: color-mix(in srgb, var(--hm-rose) 6%, transparent);
  --hm-rose-tint-08: color-mix(in srgb, var(--hm-rose) 8%, transparent);
  --hm-rose-tint-10: color-mix(in srgb, var(--hm-rose) 10%, transparent);
  --hm-rose-tint-12: color-mix(in srgb, var(--hm-rose) 12%, transparent);
  --hm-rose-tint-15: color-mix(in srgb, var(--hm-rose) 15%, transparent);
  --hm-rose-tint-16: color-mix(in srgb, var(--hm-rose) 16%, transparent);
  --hm-rose-tint-18: color-mix(in srgb, var(--hm-rose) 18%, transparent);
  --hm-rose-tint-20: color-mix(in srgb, var(--hm-rose) 20%, transparent);
  --hm-rose-tint-22: color-mix(in srgb, var(--hm-rose) 22%, transparent);
  --hm-rose-tint-25: color-mix(in srgb, var(--hm-rose) 25%, transparent);
  --hm-rose-tint-28: color-mix(in srgb, var(--hm-rose) 28%, transparent);
  --hm-rose-tint-35: color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-rose-tint-45: color-mix(in srgb, var(--hm-rose) 45%, transparent);
  --hm-gold-tint-14: color-mix(in srgb, var(--hm-gold) 14%, transparent);
  --hm-gold-tint-15: color-mix(in srgb, var(--hm-gold) 15%, transparent);
  --hm-gold-tint-25: color-mix(in srgb, var(--hm-gold) 25%, transparent);
  --hm-gold-tint-35: color-mix(in srgb, var(--hm-gold) 35%, transparent);
  --hm-gold-tint-45: color-mix(in srgb, var(--hm-gold) 45%, transparent);
  --hm-gold-tint-50: color-mix(in srgb, var(--hm-gold) 50%, transparent);
  --hm-gold-tint-65: color-mix(in srgb, var(--hm-gold) 65%, transparent);
  --hm-gold-tint-85: color-mix(in srgb, var(--hm-gold) 85%, transparent);
  --hm-gold-text: color-mix(in srgb, var(--hm-gold) 55%, var(--ink) 45%);
  --hm-surface: var(--paper, #fff9f6);
  --hm-surface-strong: color-mix(in srgb, var(--paper, #fff) 95%, transparent);
  --hm-surface-muted: color-mix(in srgb, var(--paper, #fff) 70%, transparent);
  --hm-surface-panel: color-mix(in srgb, var(--paper, #fff) 97%, transparent);
  --hm-surface-prep: color-mix(in srgb, var(--hm-bg) 94%, transparent);
  --hm-surface-input: color-mix(in srgb, var(--paper, #fff) 92%, transparent);
  --hm-ring-light: color-mix(in srgb, var(--paper, #fff) 95%, transparent);
  --hm-overlay: color-mix(in srgb, var(--ink) 35%, transparent);
  --hm-overlay-strong: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-shadow-ink-05: 0 4px 12px color-mix(in srgb, var(--ink) 5%, transparent);
  --hm-shadow-ink-08: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  --hm-shadow-ink-12: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  --hm-shadow-ink-15: 0 8px 20px color-mix(in srgb, var(--ink) 15%, transparent);
  --hm-shadow-glow-rose: 0 0 0 3px var(--hm-rose), 0 6px 16px color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-shadow-glow-rose-lg: 0 0 0 3px var(--hm-rose), 0 8px 20px color-mix(in srgb, var(--hm-rose) 35%, transparent);
  --hm-shadow-ring-rose: 0 0 0 6px var(--hm-rose-tint-12);
  --hm-shadow-speaker: 0 12px 28px color-mix(in srgb, var(--hm-rose-deep) 20%, transparent);
  --hm-shadow-gold: 0 4px 16px var(--hm-gold-tint-15);
  --hm-shadow-sheet: 0 -12px 40px color-mix(in srgb, var(--ink) 12%, transparent);
  --hm-live-surface: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-live-text: var(--champagne, #ffe8d0);
  --hm-live-text-soft: color-mix(in srgb, var(--champagne, #ffe8d0) 72%, transparent);
  --hm-live-border: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-live-btn-bg: color-mix(in srgb, var(--text) 8%, transparent);
  --hm-bubble-me: linear-gradient(135deg, var(--hm-rose-tint-20), var(--hm-gold-tint-15));
  --hm-urgent: var(--seal, #c43858);
  --hm-success: color-mix(in srgb, var(--accent) 60%, var(--gold) 40%);
  --hm-success-tint: color-mix(in srgb, var(--hm-success) 25%, transparent);
  --hm-team-red: var(--hm-rose-deep);
  --hm-team-red-light: var(--hm-rose);
  --hm-team-red-gradient: linear-gradient(145deg, var(--hm-team-red-light), var(--hm-team-red));
  --hm-team-red-tint: color-mix(in srgb, var(--hm-team-red-light) 12%, transparent);
  --hm-team-red-border: color-mix(in srgb, var(--hm-team-red-light) 25%, transparent);
  --hm-team-red-text: var(--hm-team-red);
  --hm-team-blue: color-mix(in srgb, var(--accent) 70%, var(--gold) 30%);
  --hm-team-blue-deep: color-mix(in srgb, var(--accent) 85%, var(--ink) 15%);
  --hm-team-blue-gradient: linear-gradient(145deg, var(--hm-team-blue), var(--hm-team-blue-deep));
  --hm-team-blue-tint: color-mix(in srgb, var(--hm-team-blue) 12%, transparent);
  --hm-team-blue-border: color-mix(in srgb, var(--hm-team-blue) 20%, transparent);
  --hm-team-blue-text: var(--hm-team-blue-deep);
  --hm-immersive-surface: color-mix(in srgb, var(--ink) 94%, transparent);
  --hm-immersive-card: color-mix(in srgb, var(--ink) 92%, transparent);
  --hm-immersive-gold-border: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-immersive-gold-tint: color-mix(in srgb, var(--gold) 12%, transparent);
  --hm-thumb-label-bg: color-mix(in srgb, var(--ink) 62%, transparent);
  --hm-accent-warm-gradient: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 25%, transparent), var(--hm-rose-tint-20));
  --hm-accent-warm-text: color-mix(in srgb, var(--hm-gold) 45%, var(--ink) 55%);
  --hm-muted-dot: color-mix(in srgb, var(--text-soft) 55%, transparent);
  --hm-border-subtle: color-mix(in srgb, var(--ink) 8%, transparent);
  --hm-board-wood: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 50%, var(--hm-peach) 50%), color-mix(in srgb, var(--hm-gold) 75%, var(--ink) 25%));
  --hm-board-line: color-mix(in srgb, var(--ink) 20%, transparent);
  --hm-board-shadow: inset 0 0 0 2px var(--hm-board-line), 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  --hm-stone-red: radial-gradient(circle at 35% 30%, var(--hm-team-red-light), var(--hm-team-red));
  --hm-stone-blue: radial-gradient(circle at 35% 30%, var(--hm-team-blue), var(--hm-team-blue-deep));
  --hm-stone-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 25%, transparent);
  --hm-danmaku-chip: color-mix(in srgb, var(--paper) 88%, transparent);
  --hm-immersive-btn: linear-gradient(145deg, color-mix(in srgb, var(--hm-peach) 95%, transparent), color-mix(in srgb, var(--hm-rose) 85%, transparent));
  --hm-immersive-btn-text: color-mix(in srgb, var(--ink) 72%, var(--hm-gold) 28%);
  --hm-immersive-btn-shadow: 0 4px 14px color-mix(in srgb, var(--hm-rose-deep) 20%, transparent);
  --hm-immersive-btn-active: linear-gradient(145deg, color-mix(in srgb, var(--hm-gold) 65%, var(--ink) 35%), color-mix(in srgb, var(--ink) 65%, transparent));
  --hm-immersive-arena-bg: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, var(--hm-gold) 12%), color-mix(in srgb, var(--ink) 96%, transparent));
  --hm-immersive-arena-glow: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%);
  --hm-immersive-arena-veil: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, transparent 100%);
  --hm-immersive-bar: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-immersive-bar-strong: color-mix(in srgb, var(--ink) 92%, transparent);
  --hm-immersive-text-dim: color-mix(in srgb, var(--champagne) 65%, transparent);
  --hm-immersive-text: color-mix(in srgb, var(--champagne) 78%, transparent);
  --hm-immersive-red-chip: color-mix(in srgb, var(--hm-team-red) 88%, transparent);
  --hm-immersive-gold-chip: color-mix(in srgb, var(--gold) 35%, transparent);
  --hm-immersive-gold-chip-strong: color-mix(in srgb, var(--gold) 65%, transparent);
  --hm-overlay-profile: color-mix(in srgb, var(--ink) 40%, transparent);
  --hm-overlay-profile-strong: color-mix(in srgb, var(--ink) 82%, transparent);
  --hm-pick-ring: 0 0 0 3px color-mix(in srgb, var(--paper) 90%, transparent), var(--hm-shadow-ink-15);
  --hm-shadow-ink-06: 0 4px 14px color-mix(in srgb, var(--ink) 6%, transparent);
  --hm-shadow-ink-10: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  --hm-shadow-ink-25: 0 10px 28px color-mix(in srgb, var(--ink) 25%, transparent);
  --hm-shadow-ink-35: 0 8px 24px color-mix(in srgb, var(--ink) 35%, transparent);
  --hm-shadow-ink-60: 0 6px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}

html[data-tone='light'] {
  --hm-glass-strong: color-mix(in srgb, var(--glass) 85%, var(--paper) 15%);
  --hm-on-accent: #fff;
}

html[data-theme] body.hm-page,
body.hm-page {
  background-color: var(--hm-bg);
  color: var(--hm-text);
  transition: background-color 0.45s ease, color 0.35s ease;
}