/* ==========================================================================
   懒人之家 LAZYhome · Design Tokens
   风格基调：简洁现代（V2EX 的信息密度 + Notion 的留白与克制）
   主题：3 家族 × 2 深浅 = 6 套（2026-08-16 定稿）
     绿家族   leaf 苔绿·浅（护眼柔和，默认） / forest 苔绿·深
     蓝家族   sky 静海·浅（安静开阔）        / abyss 深海·深（神秘氛围）
     橙棕家族 cozy 暖沙·浅（慵懒舒适）       / ember 炉火·深（暖夜）
   未设置 data-theme 时跟随系统：浅=leaf，深=forest。
   旧主题名 light/dark/peace 仍作为别名挂在对应新主题的选择器上，
   防止缓存中的旧 JS/内联脚本设了旧值时样式丢失。
   命名：--{类别}-{语义}-{层级}，语义层永远指向原始色板，业务只用语义层
   ========================================================================== */

:root {
  /* ---------- 1. 原始色板 Primitive（不要在业务代码里直接用） ---------- */
  --grey-0:   #ffffff;
  --grey-50:  #f7f8f8;
  --grey-100: #eff0f1;
  --grey-200: #e3e5e7;
  --grey-300: #c9ccd0;
  --grey-400: #9aa0a6;
  --grey-500: #6f7680;
  --grey-600: #4c525a;
  --grey-700: #33383f;
  --grey-800: #20242a;
  --grey-900: #15181c;
  --grey-950: #0e1013;

  /* MC 模块 · 草方块绿 */
  --mc-200: #b8e6c9; --mc-300: #7fd39b; --mc-500: #3ba55d;
  --mc-600: #2f8b4c; --mc-700: #24693a;
  /* COC 模块 · 触手墨青 */
  --coc-200: #bcdcd6; --coc-300: #7fb8ad; --coc-500: #3f8478;
  --coc-600: #336b61; --coc-700: #27524b;
  /* 功能色 */
  --blue-500: #2f7bd6; --amber-500: #d98b16;
  --red-500:  #d64545; --violet-500: #7c5cd6;

  /* ---------- 2. 字体 Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px;
  --text-lg: 16px;  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;

  --leading-tight: 1.25; --leading-normal: 1.6; --leading-loose: 1.8;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  /* 兼容别名：模板里 8 处写的是 var(--weight-bold)（早期命名遗留），指向 semibold。
     另外有 1 处写了 --text-base，指向 --text-md（14px = body 基础字号）。 */
  --weight-bold: 600;
  --text-base: var(--text-md);

  /* ---------- 3. 间距 Spacing（4px 基准） ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
  /* sp-7 (28px) 只被 hero 的 clamp() 用到一处。补上定义而不是改调用点：
     clamp() 里出现未定义变量会让**整条 padding 声明失效**（直接掉成 0），
     这类"静默归零"比配色错更难查。 */
  --sp-7: 28px;

  /* ---------- 4. 圆角 Radius ---------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
  /* 兼容别名：模板里 5 处写的是 var(--r-1)（早期命名遗留），指向 radius-sm。
     圆角与主题无关，放基础层一次定义即可。 */
  --r-1: var(--radius-sm);

  /* ---------- 5. 动效 Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* ---------- 6. 布局 Layout ---------- */
  --container-max: 1180px;
  --sidebar-w: 240px;
  --navbar-h: 56px;
  --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500;
}

/* ==========================================================================
   语义层 · 绿家族 · leaf 苔绿·浅（默认，护眼柔和）
   ------------------------------------------------------------------------
   底色是带一丝绿意的暖灰（长时间阅读不刺眼），两个板块的品牌色都在绿
   家族：MC 草方块绿（更饱和），TRPG 牛油果绿（更黄更柔）。
   ========================================================================== */
:root,
[data-theme="leaf"],
[data-theme="light"] {
  --bg-canvas:  #f3f6f1;
  --bg-surface: #fcfdfb;
  --bg-raised:  #fcfdfb;
  --bg-subtle:  #e9efe5;
  /* 兼容别名：模板里 5 处写的是 var(--bg-elev)（早期命名遗留），指向 bg-subtle。
     depend 到 bg-subtle 而不是硬编码颜色，深浅色主题自动跟随。 */
  --bg-elev:    var(--bg-subtle);
  --bg-hover:   rgba(36, 105, 58, 0.05);
  --bg-active:  rgba(36, 105, 58, 0.09);

  --fg-primary:   #1d2721;
  --fg-secondary: #4e5c53;
  --fg-tertiary:  #8b9c90;
  --fg-inverse:   #ffffff;
  --fg-link:      #2e7d4e;
  /* "accent 填充背景上的前景色"：用于主按钮文案、badge 等白字压品牌色背景的场景。
     浅色家族品牌色（绿/青/蓝/橙）足够暗 → 白字；深色系品牌色亮 → 换深字。
     每套主题按对比度要求各自覆盖这个值。 */
  --fg-on-accent: #ffffff;

  --border-subtle: #dfe7da;
  --border-strong: #c8d5c1;
  /* 兼容别名：模板里 16 处写的是 var(--border)（早期命名遗留）。 */
  --border: var(--border-subtle);

  --brand-mc:       var(--mc-600);
  --brand-mc-weak:  #e0f1e6;
  --brand-coc:      #4f7a26;
  --brand-coc-weak: #e7f0d2;

  --state-info: var(--blue-500);
  --state-warn: #b45309;
  --state-error: var(--red-500);
  --state-success: var(--mc-600);
  /* 兼容别名：模板里遗留 --danger / --success 命名（早期风格）。 */
  --danger:  var(--red-500);
  --success: var(--mc-600);

  --shadow-sm: 0 1px 2px rgba(20, 30, 24, 0.06);
  --shadow-md: 0 2px 8px rgba(20, 30, 24, 0.08);
  --shadow-lg: 0 8px 28px rgba(20, 30, 24, 0.12);

  /* 代码语法高亮：5 个语义色。挂在语义层，各主题可选择性覆盖。 */
  --syntax-string: #16a34a;
  --syntax-number: #d97706;
  --syntax-title:  #2563eb;
  --syntax-attr:   #c026d3;
  --syntax-type:   #0891b2;

  color-scheme: light;
}

/* ==========================================================================
   语义层 · 绿家族 · forest 苔绿·深
   ------------------------------------------------------------------------
   墨绿黑底（近黑但带绿调），品牌色是暗夜里的两株植物：MC 是滴过水的
   草方块（荧光绿），TRPG 是月光下的牛油果（黄绿）。
   ========================================================================== */
[data-theme="forest"],
[data-theme="dark"] {
  --bg-canvas:  #0b100d;
  --bg-surface: #121b14;
  --bg-raised:  #18251c;
  --bg-subtle:  #152017;
  --bg-elev:    var(--bg-subtle);   /* 兼容别名 */
  --bg-hover:   rgba(178, 226, 190, 0.06);
  --bg-active:  rgba(178, 226, 190, 0.10);

  --fg-primary:   #ddeade;
  --fg-secondary: #9cb2a3;
  --fg-tertiary:  #6e8273;
  --fg-inverse:   #0b100d;
  --fg-link:      #82c795;

  --border-subtle: #223127;
  --border-strong: #33453a;
  --border: #223127;   /* 兼容别名 */

  --brand-mc:       var(--mc-300);
  --brand-mc-weak:  rgba(127, 211, 155, 0.13);
  --brand-coc:      #b3d478;
  --brand-coc-weak: rgba(179, 212, 120, 0.13);

  /* 深色主题的品牌色是亮档，白字压不住 → 换深字 */
  --fg-on-accent: var(--grey-950);

  --state-info: #6ba6e8;
  --state-warn: #e8a94b;
  --state-error: #e86a6a;
  --state-success: var(--mc-300);
  --danger:  #e86a6a;              /* 兼容别名 */
  --success: var(--mc-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);

  --syntax-string: #4ade80;
  --syntax-number: #fbbf24;
  --syntax-title:  #60a5fa;
  --syntax-attr:   #e879f9;
  --syntax-type:   #22d3ee;

  color-scheme: dark;
}
[data-theme="forest"] .scope-mc,
[data-theme="dark"] .scope-mc {
  --accent: #7fd39b;
  --accent-weak: rgba(127, 211, 155, 0.13);
  --accent-strong: #a9e4bc;
  --accent-gradient: linear-gradient(120deg, #1f6636, #4fa973 55%, #a9e4bc);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, rgba(127, 211, 155, 0.20) 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #7fd39b 10%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #7fd39b 10%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #7fd39b 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #1f6636, #a9e4bc);
}
[data-theme="forest"] .scope-trpg,
[data-theme="dark"] .scope-trpg {
  --accent: #b3d478;
  --accent-weak: rgba(179, 212, 120, 0.13);
  --accent-strong: #cfe59a;
  --accent-gradient: linear-gradient(120deg, #4f7a26, #8fbf3f 55%, #dce98a);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, rgba(179, 212, 120, 0.16) 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #b3d478 20%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #8fbf3f 14%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #b3d478 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #4f7a26, #dce98a);
}

/* 绿家族 · leaf（浅）—— scope 块刻意放在 forest/dark 别名块之后：
   当「html 根挂 data-theme="dark"」这类旧别名、而页面局部出现 data-theme="leaf"
   的嵌套容器时（例如主题预览卡片），两者同为 0,2,0 特异性，靠源顺序裁决 ——
   leaf 定义在 dark 别名之后，才会用 leaf 色而不是被 forest 别名覆盖。
   （leaf 是唯一 scope 块原本排在 dark 别名之前的浅色主题，此为其根因。） */
[data-theme="leaf"] .scope-mc,
[data-theme="light"] .scope-mc {
  --accent: var(--mc-600);
  --accent-weak: #e0f1e6;
  --accent-strong: #43a35f;
  --accent-gradient: linear-gradient(120deg, #1f6636, #2f8b4c 60%, #8fd3a5);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, #e0f1e6 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #2f8b4c 8%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #2f8b4c 8%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #2f8b4c 4%, transparent);
  --card-accent-bar: linear-gradient(90deg, #1f6636, #8fd3a5);
}
[data-theme="leaf"] .scope-trpg,
[data-theme="light"] .scope-trpg {
  --accent: #4f7a26;
  --accent-weak: #e7f0d2;
  --accent-strong: #6a9a2d;
  --accent-gradient: linear-gradient(120deg, #3c5e1c, #6a9a2d 55%, #bcd98a);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, #e7f0d2 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #4f7a26 12%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #6a9a2d 8%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #4f7a26 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #3c5e1c, #bcd98a);
}

/* ==========================================================================
   语义层 · 蓝家族 · sky 静海·浅（安静开阔）
   ------------------------------------------------------------------------
   底色是"晴天云海"感的极浅天蓝，两个板块的品牌色都在蓝色系里：
   MC 是明快天蓝（皇家蓝→天蓝渐变），TRPG 是更冷更深的青蓝（cyan→teal），
   保持两板块拉开但气质一致（都属"蓝"家族）。
   ========================================================================== */
[data-theme="sky"],
[data-theme="peace"] {
  --bg-canvas:  #f0f6ff;
  --bg-surface: #ffffff;
  --bg-raised:  #ffffff;
  --bg-subtle:  #e0edff;
  --bg-elev:    var(--bg-subtle);
  --bg-hover:   rgba(37, 99, 235, 0.06);
  --bg-active:  rgba(37, 99, 235, 0.10);

  --fg-primary:   #0f172a;
  --fg-secondary: #475569;
  --fg-tertiary:  #94a3b8;
  --fg-inverse:   #ffffff;
  --fg-link:      #2563eb;

  --border-subtle: #dbeafe;
  --border-strong: #bfdbfe;
  --border:        #dbeafe;

  --brand-mc:       #2563eb;
  --brand-mc-weak:  #dbeafe;
  --brand-coc:      #0e7490;
  --brand-coc-weak: #cffafe;

  --state-info:    #3b82f6;
  --state-warn:    #d97706;
  --state-error:   #dc2626;
  --state-success: #059669;
  --danger:  #dc2626;
  --success: #059669;

  --shadow-sm: 0 1px 2px rgba(30, 64, 175, 0.08);
  --shadow-md: 0 2px 8px rgba(30, 64, 175, 0.10);
  --shadow-lg: 0 8px 28px rgba(30, 64, 175, 0.16);

  color-scheme: light;
}
[data-theme="sky"] .scope-mc,
[data-theme="peace"] .scope-mc {
  --accent: #2563eb;
  --accent-weak: #dbeafe;
  --accent-strong: #3b82f6;
  --accent-gradient: linear-gradient(120deg, #1e40af, #3b82f6 60%, #93c5fd);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, #dbeafe 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #2563eb 8%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #2563eb 8%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #2563eb 4%, transparent);
  --card-accent-bar: linear-gradient(90deg, #1e40af, #60a5fa);
}
[data-theme="sky"] .scope-trpg,
[data-theme="peace"] .scope-trpg {
  --accent: #0e7490;
  --accent-weak: #cffafe;
  --accent-strong: #06b6d4;
  --accent-gradient: linear-gradient(120deg, #164e63, #0891b2 55%, #67e8f9);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, #cffafe 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #0891b2 14%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #0891b2 10%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #0891b2 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #164e63, #67e8f9);
}

/* ==========================================================================
   语义层 · 蓝家族 · abyss 深海·深（神秘氛围）
   ------------------------------------------------------------------------
   底层是"墨海无底"般的深蓝黑（近乎黑但带蓝调），品牌色是浮在深海上的
   两抹光 —— MC 是明快天青（潜水舱的探照灯），TRPG 是宝蓝（海底的沉蓝）。
   整体氛围像克苏鲁世界的"星海"章节。
   ========================================================================== */
[data-theme="abyss"] {
  --bg-canvas:  #050a15;
  --bg-surface: #0a1428;
  --bg-raised:  #0f1e3a;
  --bg-subtle:  #0d1a30;
  --bg-elev:    var(--bg-subtle);
  --bg-hover:   rgba(147, 197, 253, 0.06);
  --bg-active:  rgba(147, 197, 253, 0.10);

  --fg-primary:   #dbeafe;
  --fg-secondary: #94a3b8;
  --fg-tertiary:  #64748b;
  --fg-inverse:   #050a15;
  --fg-link:      #7dd3fc;

  --border-subtle: #1e3a5f;
  --border-strong: #2c4a7a;
  --border:        #1e3a5f;

  --brand-mc:       #38bdf8;
  --brand-mc-weak:  rgba(56, 189, 248, 0.14);
  /* COC 在深海主题下定为宝蓝 / 群青（#3b82f6）：留在蓝色家族内，靠深浅与
     冷暖和 MC 的天青（#38bdf8）区分 —— MC 是浅海的亮青，COC 是海底的沉蓝。 */
  --brand-coc:      #3b82f6;
  --brand-coc-weak: rgba(59, 130, 246, 0.16);

  /* 深海主题的品牌色是浮在暗底上的两抹亮光，白字压不住 → 换深字 */
  --fg-on-accent: #050a15;

  --state-info:    #7dd3fc;
  --state-warn:    #fbbf24;
  --state-error:   #f87171;
  --state-success: #38bdf8;
  --danger:  #f87171;
  --success: #38bdf8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.65);

  /* 深海底上的语法色：整体往青蓝家族偏，和主题氛围一致，但保留足够色相区分 */
  --syntax-string: #5eead4;
  --syntax-number: #fcd34d;
  --syntax-title:  #93c5fd;
  --syntax-attr:   #d8b4fe;
  --syntax-type:   #67e8f9;

  color-scheme: dark;
}
[data-theme="abyss"] .scope-mc {
  --accent: #38bdf8;
  --accent-weak: rgba(56, 189, 248, 0.14);
  --accent-strong: #7dd3fc;
  --accent-gradient: linear-gradient(120deg, #0369a1, #38bdf8 55%, #bae6fd);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, rgba(56, 189, 248, 0.22) 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #38bdf8 10%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #38bdf8 10%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #38bdf8 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #0369a1, #7dd3fc);
}
[data-theme="abyss"] .scope-trpg {
  --accent: #3b82f6;
  --accent-weak: rgba(59, 130, 246, 0.16);
  --accent-strong: #60a5fa;
  --accent-gradient: linear-gradient(120deg, #1e3a8a, #3b82f6 55%, #93c5fd);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, rgba(59, 130, 246, 0.24) 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #60a5fa 22%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #3b82f6 16%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #3b82f6 6%, transparent);
  --card-accent-bar: linear-gradient(90deg, #1e3a8a, #60a5fa);
}

/* ==========================================================================
   语义层 · 橙棕家族 · cozy 暖沙·浅（慵懒舒适）
   ------------------------------------------------------------------------
   全站暖色调，气质像秋日下午的咖啡馆：底色是奶油纸感的暖白，文字是深棕，
   两个板块的品牌色都在橙棕家族里 —— MC 是烤面包色的琥珀橙（更亮），TRPG
   是更深的焦糖/铜色（更沉）。适合长时间阅读，不刺眼。
   ========================================================================== */
[data-theme="cozy"] {
  --bg-canvas:  #fdf6ec;
  --bg-surface: #fffbf3;
  --bg-raised:  #fffbf3;
  --bg-subtle:  #f5e8d3;
  --bg-elev:    var(--bg-subtle);
  --bg-hover:   rgba(180, 83, 9, 0.06);
  --bg-active:  rgba(180, 83, 9, 0.10);

  --fg-primary:   #3f2a1a;
  --fg-secondary: #7c5c3e;
  --fg-tertiary:  #a58768;
  --fg-inverse:   #fffbf3;
  --fg-link:      #b45309;

  --border-subtle: #eddcc0;
  --border-strong: #d9c19a;
  --border:        #eddcc0;

  /* 板块品牌色必须和下方两个 scope 块同步。
     分工：MC = 暖橙蜂蜜（舒服温暖），TRPG = 深焙棕（慵懒放松）。 */
  --brand-mc:       #b45309;
  --brand-mc-weak:  #fde68a;
  --brand-coc:      #7c2d12;
  --brand-coc-weak: #ecd9c6;

  --state-info:    #c2410c;
  --state-warn:    #ca8a04;
  --state-error:   #b91c1c;
  --state-success: #65a30d;
  --danger:  #b91c1c;
  --success: #65a30d;

  --shadow-sm: 0 1px 2px rgba(120, 53, 15, 0.08);
  --shadow-md: 0 2px 8px rgba(120, 53, 15, 0.10);
  --shadow-lg: 0 8px 28px rgba(120, 53, 15, 0.16);

  /* 暖底上的语法色：整体压暖压深一档，避免亮蓝/亮紫在奶白纸底上跳出来 */
  --syntax-string: #15803d;
  --syntax-number: #b45309;
  --syntax-title:  #1d4ed8;
  --syntax-attr:   #a21caf;
  --syntax-type:   #0e7490;

  color-scheme: light;
}
/* 橙棕主题的两个板块分工：MC = 暖橙蜂蜜，TRPG = 深焙棕，靠明度 + 饱和度分层。
   浅底主题上 accent 常被当正文色用，所以两者都必须压到足够深：
   #b45309 对 #fffbf3 约 5.2:1、#7c2d12 约 9.8:1，都过 AA。 */
[data-theme="cozy"] .scope-mc {
  --accent: #b45309;
  --accent-weak: #fde68a;
  --accent-strong: #d97706;
  --accent-gradient: linear-gradient(120deg, #92400e, #d97706 55%, #fde68a);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, #fde68a 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #b45309 8%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #b45309 8%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #b45309 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #92400e, #fde68a);
}
[data-theme="cozy"] .scope-trpg {
  --accent: #7c2d12;
  --accent-weak: #ecd9c6;
  --accent-strong: #9a3412;
  --accent-gradient: linear-gradient(120deg, #5c2410, #9a3412 55%, #d6a878);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, #e7cdb0 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #7c2d12 14%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #9a3412 10%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #7c2d12 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #5c2410, #d6a878);
}

/* ==========================================================================
   语义层 · 橙棕家族 · ember 炉火·深（暖夜）
   ------------------------------------------------------------------------
   cozy 的深色孪生：底层是篝火熄后半掩的暖棕黑，文字是烛光下的米色，
   品牌色是炉膛里的两簇火 —— MC 是蜂蜜琥珀（跳动的明火），TRPG 是
   铜器反光（沉一点的暖光）。深夜阅读不冷。
   ========================================================================== */
[data-theme="ember"] {
  --bg-canvas:  #191009;
  --bg-surface: #221810;
  --bg-raised:  #2b2015;
  --bg-subtle:  #261b10;
  --bg-elev:    var(--bg-subtle);
  --bg-hover:   rgba(236, 180, 110, 0.06);
  --bg-active:  rgba(236, 180, 110, 0.10);

  --fg-primary:   #f0e4d0;
  --fg-secondary: #c0ab8d;
  --fg-tertiary:  #937e62;
  --fg-inverse:   #191009;
  --fg-link:      #e6b273;

  --border-subtle: #382a1b;
  --border-strong: #4d3b26;
  --border:        #382a1b;

  --brand-mc:       #eca53f;
  --brand-mc-weak:  rgba(236, 165, 63, 0.14);
  --brand-coc:      #d99a6c;
  --brand-coc-weak: rgba(217, 154, 108, 0.14);

  /* 亮档品牌色压不住白字 → 换暖黑字 */
  --fg-on-accent: #191009;

  --state-info:    #8ab6de;
  --state-warn:    #e8c14b;
  --state-error:   #ef8080;
  --state-success: #a9c46a;
  --danger:  #ef8080;
  --success: #a9c46a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.6);

  /* 炉火底上的语法色：往暖家族偏，蓝紫收敛成夜色里的余光 */
  --syntax-string: #b5cc7a;
  --syntax-number: #f5c86a;
  --syntax-title:  #a3c2e8;
  --syntax-attr:   #e0a8d8;
  --syntax-type:   #7fc4b8;

  color-scheme: dark;
}
[data-theme="ember"] .scope-mc {
  --accent: #eca53f;
  --accent-weak: rgba(236, 165, 63, 0.14);
  --accent-strong: #f5c86a;
  --accent-gradient: linear-gradient(120deg, #7c4a12, #d97706 55%, #fbd38d);
  --hero-glow: radial-gradient(120% 140% at 50% -10%, rgba(236, 165, 63, 0.20) 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, #eca53f 10%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, #eca53f 10%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, #eca53f 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #7c4a12, #fbd38d);
}
[data-theme="ember"] .scope-trpg {
  --accent: #d99a6c;
  --accent-weak: rgba(217, 154, 108, 0.14);
  --accent-strong: #e6bd94;
  --accent-gradient: linear-gradient(120deg, #5c3a1e, #9a6b3f 55%, #e8cba0);
  --hero-glow: radial-gradient(100% 120% at 50% 0%, rgba(217, 154, 108, 0.18) 0%, transparent 55%);
  --hero-texture:
    radial-gradient(color-mix(in srgb, #d99a6c 20%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, #9a6b3f 14%, transparent) 1px, transparent 1.8px);
  --hero-texture-size: 22px 22px, 38px 38px;
  --ambient-tint: color-mix(in srgb, #d99a6c 5%, transparent);
  --card-accent-bar: linear-gradient(90deg, #5c3a1e, #e8cba0);
}

/* 系统偏好深色但用户没显式选主题 → 用 forest 的值 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-canvas: #0b100d; --bg-surface: #121b14;
    --bg-raised: #18251c; --bg-subtle: #152017;
    --bg-elev: #152017;   /* 兼容别名 */
    --bg-hover: rgba(178,226,190,0.06); --bg-active: rgba(178,226,190,0.10);
    --fg-primary: #ddeade; --fg-secondary: #9cb2a3;
    --fg-tertiary: #6e8273; --fg-inverse: #0b100d;
    --fg-link: #82c795;
    --border-subtle: #223127; --border-strong: #33453a; --border: #223127;
    --brand-mc: var(--mc-300); --brand-mc-weak: rgba(127,211,155,0.13);
    --brand-coc: #b3d478; --brand-coc-weak: rgba(179,212,120,0.13);
    --fg-on-accent: var(--grey-950);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 2px 10px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 32px rgba(0,0,0,.55);
    --state-info: #6ba6e8; --state-warn: #e8a94b; --state-error: #e86a6a;
    --state-success: var(--mc-300);
    --danger: #e86a6a; --success: var(--mc-300);   /* 兼容别名 */
    --syntax-string: #4ade80; --syntax-number: #fbbf24; --syntax-title: #60a5fa;
    --syntax-attr: #e879f9; --syntax-type: #22d3ee;
    color-scheme: dark;
  }
}

/* 未标 scope 时（少量跨板块页）回落到 MC 氛围 */
:root {
  --accent-strong: var(--mc-500);
  --accent-gradient: linear-gradient(120deg, var(--mc-600), var(--mc-500) 60%, var(--mc-300));
  --hero-glow: radial-gradient(120% 140% at 50% -10%, var(--brand-mc-weak) 0%, transparent 60%);
  --hero-texture:
    linear-gradient(0deg, transparent 7px, color-mix(in srgb, var(--brand-mc) 7%, transparent) 8px),
    linear-gradient(90deg, transparent 7px, color-mix(in srgb, var(--brand-mc) 7%, transparent) 8px);
  --hero-texture-size: 8px 8px;
  --ambient-tint: color-mix(in srgb, var(--brand-mc) 4%, transparent);
  --card-accent-bar: linear-gradient(90deg, var(--mc-600), var(--mc-300));
}

/* ==========================================================================
   称号 Token（高亮称号是社区身份的核心视觉资产，单独成体系）
   等级：member < veteran < mod < admin < sponsor
   ========================================================================== */
:root {
  --title-member-fg:  var(--fg-secondary);
  --title-member-bg:  var(--bg-subtle);

  --title-veteran-fg: var(--coc-600);
  --title-veteran-bg: var(--brand-coc-weak);

  --title-mod-fg:     var(--blue-500);
  --title-mod-bg:     rgba(47, 123, 214, 0.12);

  --title-admin-fg:   var(--red-500);
  --title-admin-bg:   rgba(214, 69, 69, 0.12);

  /* 赞助者：渐变文字 + 微光晕，唯一允许使用渐变的称号等级 */
  --title-sponsor-gradient: linear-gradient(92deg, #d98b16, #e0c060, #d98b16);
  --title-sponsor-glow: 0 0 12px rgba(217, 139, 22, 0.35);
}
[data-theme="forest"],
[data-theme="dark"] {
  --title-veteran-fg: #b3d478;
  --title-mod-fg: #6ba6e8;
  --title-admin-fg: #e86a6a;
}
[data-theme="abyss"] {
  /* veteran 一贯跟 TRPG 品牌色走，TRPG 定宝蓝后这里同步 */
  --title-veteran-fg: #60a5fa;
  --title-veteran-bg: rgba(59, 130, 246, 0.16);
  --title-mod-fg:     #7dd3fc;
  --title-mod-bg:     rgba(56, 189, 248, 0.14);
  --title-admin-fg:   #f87171;
  --title-admin-bg:   rgba(248, 113, 113, 0.14);
}
[data-theme="sky"],
[data-theme="peace"] {
  --title-veteran-fg: #0e7490;
  --title-veteran-bg: #cffafe;
  --title-mod-fg:     #2563eb;
  --title-mod-bg:     rgba(37, 99, 235, 0.12);
  --title-admin-fg:   #dc2626;
  --title-admin-bg:   rgba(220, 38, 38, 0.12);
}
[data-theme="cozy"] {
  --title-veteran-fg: #7c2d12;
  --title-veteran-bg: #ecd9c6;
  --title-mod-fg:     #b45309;
  --title-mod-bg:     rgba(180, 83, 9, 0.12);
  --title-admin-fg:   #b91c1c;
  --title-admin-bg:   rgba(185, 28, 28, 0.12);
  /* 暖色主题下赞助者金渐变要压暖一档，否则和橙棕底撞在一起分不出层次 */
  --title-sponsor-gradient: linear-gradient(92deg, #b45309, #eab308, #b45309);
  --title-sponsor-glow: 0 0 12px rgba(180, 83, 9, 0.35);
}
[data-theme="ember"] {
  --title-veteran-fg: #e6bd94;
  --title-veteran-bg: rgba(217, 154, 108, 0.16);
  --title-mod-fg:     #f5c86a;
  --title-mod-bg:     rgba(236, 165, 63, 0.14);
  --title-admin-fg:   #ef8080;
  --title-admin-bg:   rgba(239, 128, 128, 0.14);
  /* 炉火夜里金渐变更暖更亮，像炭火余烬 */
  --title-sponsor-gradient: linear-gradient(92deg, #e8a94b, #f5df9a, #e8a94b);
  --title-sponsor-glow: 0 0 12px rgba(232, 169, 75, 0.35);
}