/* ============================================================
   心理咨询师 AI 助手 · 颜色系统 v1.0
   Color System for Counselor AI Assistant
   ============================================================
   组织结构：
   1. 原始色阶（Primitive Tokens）— 所有可用色值，不直接使用
   2. 语义色（Semantic Tokens）— 组件实际引用的变量
   3. 暗色模式覆盖（Dark Mode）
   4. 实用工具类（Utility Classes）
   ============================================================ */


/* ============================================================
   1. PRIMITIVE TOKENS — 原始色阶
   命名规则：--color-[色系]-[明度等级 50~950]
   ============================================================ */

:root {

  /* --- Sage Green · 鼠尾草绿（主色系）--- */
  --color-sage-50:  #F2F7F4;
  --color-sage-100: #DFF0E7;
  --color-sage-200: #C2E0CF;
  --color-sage-300: #A8C9B5;
  --color-sage-400: #8CB89C;
  --color-sage-500: #7BAF8E;   /* ★ 品牌主色 */
  --color-sage-600: #5E9775;
  --color-sage-700: #4A8A65;
  --color-sage-800: #2F6347;
  --color-sage-900: #1A3D2B;
  --color-sage-950: #0D2219;

  /* Modality: CBT — violet scale */
  --color-violet-50:  #F4F0FB;
  --color-violet-100: #E6DCF5;
  --color-violet-200: #CDB9EB;
  --color-violet-300: #B496E0;
  --color-violet-400: #A283D5;
  --color-violet-500: #9B6DD9;
  --color-violet-600: #7E51BD;
  --color-violet-700: #623E96;
  --color-violet-800: #482C70;
  --color-violet-900: #2F1B4A;

  /* Modality: PDT — amber scale */
  --color-amber-50:  #FDF3EA;
  --color-amber-100: #FAE2CD;
  --color-amber-200: #F4C49C;
  --color-amber-300: #ECA66C;
  --color-amber-400: #E5934C;
  --color-amber-500: #E09250;
  --color-amber-600: #BB7740;
  --color-amber-700: #905A30;
  --color-amber-800: #6A4222;
  --color-amber-900: #432A15;

  /* --- Sand · 砂陶米（暖色辅助系）--- */
  --color-sand-50:  #FDF9F5;
  --color-sand-100: #F5EDE0;
  --color-sand-200: #E8D5BE;
  --color-sand-300: #DBBF9A;
  --color-sand-400: #CCA878;
  --color-sand-500: #C8A882;   /* ★ 暖色主调 */
  --color-sand-600: #B28B62;
  --color-sand-700: #A07850;
  --color-sand-800: #7A5A38;
  --color-sand-900: #4A3422;
  --color-sand-950: #2E1F12;

  /* --- Warm Gray · 暖灰（中性基础）--- */
  --color-gray-50:  #FAF9F7;
  --color-gray-100: #F5F3EF;   /* ★ 页面底色 */
  --color-gray-200: #E8E6E1;
  --color-gray-300: #D4D1CB;
  --color-gray-400: #B8B4AC;
  --color-gray-500: #9A9690;
  --color-gray-600: #7A7870;
  --color-gray-700: #5E5C56;
  --color-gray-800: #3E3C38;
  --color-gray-900: #2C2A26;   /* ★ 主文字色 */
  --color-gray-950: #1A1916;

  /* --- Lavender · 薰衣草紫（洞察·认知）--- */
  --color-lavender-50:  #F8F4FC;
  --color-lavender-100: #EFE6F8;
  --color-lavender-200: #DCC8ED;
  --color-lavender-300: #C4A4DF;
  --color-lavender-400: #AC80D0;
  --color-lavender-500: #9B72B8;   /* ★ 认知标注色 */
  --color-lavender-600: #8058A5;
  --color-lavender-700: #664188;
  --color-lavender-800: #4A2D65;
  --color-lavender-900: #3A1D55;
  --color-lavender-950: #210F34;

  /* --- Ember · 琥珀橙（需关注·情绪波动）--- */
  --color-ember-50:  #FEF7F0;
  --color-ember-100: #FCEADB;
  --color-ember-200: #F8D0B0;
  --color-ember-300: #F0B07C;
  --color-ember-400: #E49856;
  --color-ember-500: #D4894A;   /* ★ 关注提示色 */
  --color-ember-600: #BC6E30;
  --color-ember-700: #9E5722;
  --color-ember-800: #7A3F17;
  --color-ember-900: #4A2A10;
  --color-ember-950: #2E1708;

  /* --- Rose · 玫瑰红（高风险·危机预警）--- */
  --color-rose-50:  #FEF2F2;
  --color-rose-100: #FCE0E0;
  --color-rose-200: #F8BEBE;
  --color-rose-300: #F09090;
  --color-rose-400: #E46A6A;
  --color-rose-500: #D45555;   /* ★ 危机预警色 */
  --color-rose-600: #BA3A3A;
  --color-rose-700: #9A2B2B;
  --color-rose-800: #741E1E;
  --color-rose-900: #501313;
  --color-rose-950: #300A0A;

  /* --- Mint · 薄荷（进展良好·积极状态）--- */
  --color-mint-50:  #EDF6F1;
  --color-mint-100: #D3EBE0;
  --color-mint-200: #A8D5C0;
  --color-mint-300: #78BC9C;
  --color-mint-400: #5AAD87;
  --color-mint-500: #4F9A78;   /* ★ 积极状态色 */
  --color-mint-600: #3D8062;
  --color-mint-700: #2E664E;
  --color-mint-800: #1F4D3A;
  --color-mint-900: #123325;
  --color-mint-950: #081D14;

  /* --- Sky · 天蓝（信息·中性进展）--- */
  --color-sky-50:  #F0F7FB;
  --color-sky-100: #DBECF6;
  --color-sky-200: #B4D7EC;
  --color-sky-300: #82BBDD;
  --color-sky-400: #549DCC;
  --color-sky-500: #3B86BA;   /* ★ 信息提示色 */
  --color-sky-600: #2C6E9D;
  --color-sky-700: #245A82;
  --color-sky-800: #1B4360;
  --color-sky-900: #122C40;
  --color-sky-950: #091828;

  /* --- Teal · 青绿（动力学·关系链路）--- */
  --color-teal-50:  #EEF7F5;
  --color-teal-100: #D2EBE5;
  --color-teal-200: #A6D6CB;
  --color-teal-300: #74BCAB;
  --color-teal-400: #4DA38E;
  --color-teal-500: #3D8B77;   /* ★ 关系链路色 */
  --color-teal-600: #2E7160;
  --color-teal-700: #245A4D;
  --color-teal-800: #1B433A;
  --color-teal-900: #122C26;
  --color-teal-950: #091814;

}


/* ============================================================
   2. SEMANTIC TOKENS — 语义色
   这些才是组件中应该引用的变量
   ============================================================ */

:root {

  /* ---- 背景层级 ---- */
  --bg-base:          var(--color-gray-100);    /* 页面底色 */
  --bg-surface:       var(--color-gray-50);     /* 卡片/面板白底 */
  --bg-elevated:      #FFFFFF;                  /* 浮层/模态框 */
  --bg-sunken:        var(--color-gray-200);    /* 凹陷区域/输入框 */
  --bg-overlay:       rgba(44, 42, 38, 0.48);   /* 半透明遮罩 */

  /* ---- 品牌色语义 ---- */
  --brand-primary:          var(--color-sage-500);
  --brand-primary-hover:    var(--color-sage-600);
  --brand-primary-active:   var(--color-sage-700);
  --brand-primary-subtle:   var(--color-sage-100);
  --brand-primary-muted:    var(--color-sage-200);
  --brand-on-primary:       #FFFFFF;            /* 品牌色上的文字 */

  /* Modality semantic tokens (used by .patient-tab-dot, active underline) */
  --modality-general:        var(--brand-primary);
  --modality-cbt:            var(--color-violet-500);
  --modality-pdt:            var(--color-amber-500);
  --modality-general-subtle: var(--brand-primary-subtle);
  --modality-cbt-subtle:     var(--color-violet-100);
  --modality-pdt-subtle:     var(--color-amber-100);

  /* Patient workbench tier surfaces (neutral warm grays) */
  --surface-workbench-chrome:  var(--color-gray-50);    /* TIER 1 — #FAF9F7 — .main-header */
  --surface-workbench-content: var(--color-gray-100);   /* TIER 2 — #F5F3EF — .main-content-scroll */

  /* ---- 文字层级 ---- */
  --text-primary:     var(--color-gray-900);    /* 标题、主体文字 */
  --text-secondary:   var(--color-gray-600);    /* 说明、描述文字 */
  --text-tertiary:    var(--color-gray-500);    /* 占位符、提示文字 */
  --text-disabled:    var(--color-gray-400);    /* 禁用状态 */
  --text-muted-on-warm: var(--color-gray-700);  /* AA on amber-100 tier */
  --text-inverse:     #FFFFFF;                  /* 深色底上的文字 */
  --text-link:        var(--color-sage-700);
  --text-link-hover:  var(--color-sage-800);

  /* ---- 边框层级 ---- */
  --border-subtle:    var(--color-gray-200);    /* 最轻的分割线 */
  --border-default:   var(--color-gray-300);    /* 默认边框 */
  --border-strong:    var(--color-gray-400);    /* 强调边框 */
  --border-focus:     var(--color-sage-500);    /* 聚焦环 */
  --border-brand:     var(--color-sage-400);

  /* ---- 语义状态色 ---- */

  /* 进展良好 · Positive */
  --status-positive-bg:     var(--color-mint-50);
  --status-positive-border: var(--color-mint-200);
  --status-positive-text:   var(--color-mint-800);
  --status-positive-icon:   var(--color-mint-500);
  --status-positive-badge:  var(--color-mint-100);

  /* 需关注 · Warning */
  --status-warning-bg:      var(--color-ember-50);
  --status-warning-border:  var(--color-ember-200);
  --status-warning-text:    var(--color-ember-800);
  --status-warning-icon:    var(--color-ember-500);
  --status-warning-badge:   var(--color-ember-100);

  /* 高风险 · Danger */
  --status-danger-bg:       var(--color-rose-50);
  --status-danger-border:   var(--color-rose-200);
  --status-danger-text:     var(--color-rose-800);
  --status-danger-icon:     var(--color-rose-500);
  --status-danger-badge:    var(--color-rose-100);

  /* 深度洞察 · Insight */
  --status-insight-bg:      var(--color-lavender-50);
  --status-insight-border:  var(--color-lavender-200);
  --status-insight-text:    var(--color-lavender-800);
  --status-insight-icon:    var(--color-lavender-500);
  --status-insight-badge:   var(--color-lavender-100);

  /* 信息 · Info（蓝；如认知扭曲轻度标注） */
  --status-info-bg:         var(--color-sky-50);
  --status-info-border:     var(--color-sky-200);
  --status-info-text:       var(--color-sky-800);
  --status-info-icon:       var(--color-sky-500);
  --status-info-badge:      var(--color-sky-100);

  /* 中性信息 · Neutral */
  --status-neutral-bg:      var(--color-sand-50);
  --status-neutral-border:  var(--color-sand-200);
  --status-neutral-text:    var(--color-sand-800);
  --status-neutral-icon:    var(--color-sand-500);
  --status-neutral-badge:   var(--color-sand-100);

  /* ---- PDT 精神动力学语义色 ---- */
  /* Vaillant 防御层级:primitive(原始)/neurotic(神经症)/mature(成熟) */
  --pdt-defense-primitive:        var(--color-rose-600);
  --pdt-defense-primitive-text:   var(--color-rose-700);
  --pdt-defense-primitive-bg:     var(--color-rose-100);
  --pdt-defense-neurotic:         var(--color-ember-500);
  --pdt-defense-neurotic-text:    var(--color-ember-700);
  --pdt-defense-neurotic-bg:      var(--color-ember-100);
  --pdt-defense-mature:           var(--color-mint-500);
  --pdt-defense-mature-text:      var(--color-mint-700);
  --pdt-defense-mature-bg:        var(--color-mint-100);

  /* CCRT 关系冲突角色:Wish(W) / Response of Other(RO) / Response of Self(RS) */
  --pdt-ccrt-w:   var(--color-lavender-500);
  --pdt-ccrt-ro:  var(--color-teal-500);
  --pdt-ccrt-rs:  var(--color-rose-500);

  /* 个案概念化置信度 + 修订类型 */
  --pdt-conf-low-text:        var(--color-ember-700);
  --pdt-conf-low-bg:          var(--color-ember-100);
  --pdt-conf-mid-text:        var(--color-sky-700);
  --pdt-conf-mid-bg:          var(--color-sky-100);
  --pdt-conf-high-text:       var(--color-mint-700);
  --pdt-conf-high-bg:         var(--color-mint-100);
  --pdt-revision-added:       var(--color-mint-700);
  --pdt-revision-added-bg:    var(--color-mint-100);
  --pdt-revision-refined:     var(--color-sky-700);
  --pdt-revision-refined-bg:  var(--color-sky-100);
  --pdt-revision-confirmed:   var(--color-gray-700);
  --pdt-revision-confirmed-bg: var(--color-gray-200);
  --pdt-revision-contradicted: var(--color-rose-700);
  --pdt-revision-contradicted-bg: var(--color-rose-100);

  /* ---- Diff 对比色 ---- */
  --diff-removed-bg:    rgba(254, 202, 202, 1);
  --diff-removed-text:  var(--color-rose-800);
  --diff-added-bg:      rgba(187, 247, 208, 1);
  --diff-added-text:    #166534;

  /* ---- 说话人配色（录音转写） ---- */
  --speaker-1: #4a90d9;
  --speaker-2: #d94a7a;
  --speaker-3: #4ad990;
  --speaker-4: #d9a04a;
  --speaker-5: #9a4ad9;
  --speaker-6: #4ad9d9;

  /* ---- 交互状态 ---- */
  --state-hover:    rgba(123, 175, 142, 0.08);   /* 通用悬停叠加 */
  --state-active:   rgba(123, 175, 142, 0.14);   /* 通用按下叠加 */
  --state-selected: rgba(123, 175, 142, 0.12);   /* 选中态底色 */
  --state-disabled: rgba(44, 42, 38, 0.38);      /* 禁用态透明度 */

  /* ---- 阴影 ---- */
  --shadow-xs:  0 1px 2px rgba(44, 42, 38, 0.04);
  --shadow-sm:  0 1px 4px rgba(44, 42, 38, 0.06), 0 1px 2px rgba(44, 42, 38, 0.04);
  --shadow-md:  0 4px 12px rgba(44, 42, 38, 0.08), 0 1px 4px rgba(44, 42, 38, 0.04);
  --shadow-lg:  0 8px 24px rgba(44, 42, 38, 0.10), 0 2px 8px rgba(44, 42, 38, 0.06);
  --shadow-xl:  0 16px 40px rgba(44, 42, 38, 0.12), 0 4px 12px rgba(44, 42, 38, 0.06);
  --shadow-focus: 0 0 0 3px rgba(123, 175, 142, 0.30);  /* 聚焦环 */

  /* ---- 圆角 ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Layout --- */
  --nav-width: fit-content;

}


/* ============================================================
   2b. BACKWARD-COMPAT ALIASES — 过渡别名
   Maps legacy variable names to semantic tokens.
   ============================================================ */

:root {
  --accent:        var(--brand-primary);
  --accent-hover:  var(--brand-primary-hover);
  --bg-body:       var(--bg-elevated);
  --bg-sidebar:    var(--bg-surface);
  --bg-list:       var(--bg-base);
  --border-color:  var(--border-default);
  --text-main:     var(--text-primary);
  --text-muted:    var(--text-secondary);
  --text-nav:      var(--text-secondary);
  --hover-bg:      var(--state-hover);
  --content-bg:    var(--bg-base);
}


/* ============================================================
   3. DARK MODE — 暗色模式
   Manual toggle: [data-theme="dark"]
   System fallback: @media (prefers-color-scheme: dark)
   ============================================================ */

[data-theme="dark"] {
    /* 背景 */
    --bg-base:          #1A1916;
    --bg-surface:       #222120;
    --bg-elevated:      #2C2A26;
    --bg-sunken:        #141412;
    --bg-overlay:       rgba(0, 0, 0, 0.60);

    /* 品牌 */
    --brand-primary:          var(--color-sage-400);
    --brand-primary-hover:    var(--color-sage-300);
    --brand-primary-active:   var(--color-sage-200);
    --brand-primary-subtle:   rgba(123, 175, 142, 0.12);
    --brand-primary-muted:    rgba(123, 175, 142, 0.20);
    --brand-on-primary:       var(--color-gray-950);

    /* 文字 */
    --text-primary:     var(--color-gray-100);
    --text-secondary:   var(--color-gray-400);
    --text-tertiary:    var(--color-gray-500);
    --text-disabled:    var(--color-gray-700);
    --text-link:        var(--color-sage-400);
    --text-link-hover:  var(--color-sage-300);

    /* 边框 */
    --border-subtle:    rgba(255, 255, 255, 0.06);
    --border-default:   rgba(255, 255, 255, 0.10);
    --border-strong:    rgba(255, 255, 255, 0.18);
    --border-focus:     var(--color-sage-400);
    --border-brand:     var(--color-sage-500);

    --modality-cbt:            var(--color-violet-400);
    --modality-pdt:            var(--color-amber-400);
    --modality-cbt-subtle:     var(--color-violet-800);
    --modality-pdt-subtle:     var(--color-amber-800);

    /* Patient workbench tier surfaces (dark theme) */
    --surface-workbench-chrome:  var(--bg-sunken);
    --surface-workbench-content: var(--bg-surface);
    --text-muted-on-warm:        var(--text-secondary);

    /* 状态 · Positive */
    --status-positive-bg:     rgba(79, 154, 120, 0.12);
    --status-positive-border: rgba(79, 154, 120, 0.25);
    --status-positive-text:   var(--color-mint-300);
    --status-positive-icon:   var(--color-mint-400);
    --status-positive-badge:  rgba(79, 154, 120, 0.18);

    /* 状态 · Warning */
    --status-warning-bg:      rgba(212, 137, 74, 0.12);
    --status-warning-border:  rgba(212, 137, 74, 0.25);
    --status-warning-text:    var(--color-ember-300);
    --status-warning-icon:    var(--color-ember-400);
    --status-warning-badge:   rgba(212, 137, 74, 0.18);

    /* 状态 · Danger */
    --status-danger-bg:       rgba(212, 85, 85, 0.12);
    --status-danger-border:   rgba(212, 85, 85, 0.25);
    --status-danger-text:     var(--color-rose-300);
    --status-danger-icon:     var(--color-rose-400);
    --status-danger-badge:    rgba(212, 85, 85, 0.18);

    /* 状态 · Insight */
    --status-insight-bg:      rgba(155, 114, 184, 0.12);
    --status-insight-border:  rgba(155, 114, 184, 0.25);
    --status-insight-text:    var(--color-lavender-300);
    --status-insight-icon:    var(--color-lavender-400);
    --status-insight-badge:   rgba(155, 114, 184, 0.18);

    /* 状态 · Info（蓝） */
    --status-info-bg:         rgba(59, 134, 186, 0.12);
    --status-info-border:     rgba(59, 134, 186, 0.25);
    --status-info-text:       var(--color-sky-300);
    --status-info-icon:       var(--color-sky-400);
    --status-info-badge:      rgba(59, 134, 186, 0.18);

    /* 状态 · Neutral */
    --status-neutral-bg:      rgba(200, 168, 130, 0.10);
    --status-neutral-border:  rgba(200, 168, 130, 0.22);
    --status-neutral-text:    var(--color-sand-300);
    --status-neutral-icon:    var(--color-sand-400);
    --status-neutral-badge:   rgba(200, 168, 130, 0.16);

    /* PDT 精神动力学（dark） */
    --pdt-defense-primitive:        var(--color-rose-400);
    --pdt-defense-primitive-text:   var(--color-rose-300);
    --pdt-defense-primitive-bg:     rgba(212, 85, 85, 0.18);
    --pdt-defense-neurotic:         var(--color-ember-400);
    --pdt-defense-neurotic-text:    var(--color-ember-300);
    --pdt-defense-neurotic-bg:      rgba(212, 137, 74, 0.18);
    --pdt-defense-mature:           var(--color-mint-400);
    --pdt-defense-mature-text:      var(--color-mint-300);
    --pdt-defense-mature-bg:        rgba(79, 154, 120, 0.18);
    --pdt-ccrt-w:   var(--color-lavender-400);
    --pdt-ccrt-ro:  var(--color-teal-400);
    --pdt-ccrt-rs:  var(--color-rose-400);
    --pdt-conf-low-text:   var(--color-ember-300);
    --pdt-conf-low-bg:     rgba(212, 137, 74, 0.18);
    --pdt-conf-mid-text:   var(--color-sky-300);
    --pdt-conf-mid-bg:     rgba(59, 134, 186, 0.18);
    --pdt-conf-high-text:  var(--color-mint-300);
    --pdt-conf-high-bg:    rgba(79, 154, 120, 0.18);
    --pdt-revision-added:           var(--color-mint-300);
    --pdt-revision-added-bg:        rgba(79, 154, 120, 0.18);
    --pdt-revision-refined:         var(--color-sky-300);
    --pdt-revision-refined-bg:      rgba(59, 134, 186, 0.18);
    --pdt-revision-confirmed:       var(--color-gray-400);
    --pdt-revision-confirmed-bg:    rgba(255, 255, 255, 0.08);
    --pdt-revision-contradicted:    var(--color-rose-300);
    --pdt-revision-contradicted-bg: rgba(212, 85, 85, 0.18);

    /* Diff */
    --diff-removed-bg:    rgba(239, 68, 68, 0.25);
    --diff-removed-text:  var(--color-rose-300);
    --diff-added-bg:      rgba(34, 197, 94, 0.25);
    --diff-added-text:    var(--color-mint-200);

    /* 交互 */
    --state-hover:    rgba(140, 184, 156, 0.10);
    --state-active:   rgba(140, 184, 156, 0.16);
    --state-selected: rgba(140, 184, 156, 0.14);
    --state-disabled: rgba(255, 255, 255, 0.28);

    /* 阴影（暗色下减弱） */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.20);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-focus: 0 0 0 3px rgba(140, 184, 156, 0.36);

    /* Backward-compat aliases (dark) */
    --accent:        var(--brand-primary);
    --accent-hover:  var(--brand-primary-hover);
    --bg-body:       var(--bg-elevated);
    --bg-sidebar:    var(--bg-surface);
    --bg-list:       var(--bg-base);
    --border-color:  var(--border-default);
    --text-main:     var(--text-primary);
    --text-muted:    var(--text-secondary);
    --text-nav:      var(--text-secondary);
    --hover-bg:      var(--state-hover);
    --content-bg:    var(--bg-base);
}

/* Fallback: apply dark mode from system preference when JS hasn't set data-theme yet */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-base: #1A1916;
    --bg-surface: #222120;
    --bg-elevated: #2C2A26;
    --bg-sunken: #141412;
    --bg-overlay: rgba(0, 0, 0, 0.60);
    --brand-primary: var(--color-sage-400);
    --brand-primary-hover: var(--color-sage-300);
    --brand-primary-subtle: rgba(123, 175, 142, 0.12);
    --brand-primary-muted: rgba(123, 175, 142, 0.20);
    --text-primary: var(--color-gray-100);
    --text-secondary: var(--color-gray-400);
    --text-tertiary: var(--color-gray-500);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --state-hover: rgba(140, 184, 156, 0.10);
    --diff-removed-bg: rgba(239, 68, 68, 0.25);
    --diff-removed-text: var(--color-rose-300);
    --diff-added-bg: rgba(34, 197, 94, 0.25);
    --diff-added-text: var(--color-mint-200);
    --accent: var(--color-sage-400);
    --bg-body: #2C2A26;
    --bg-sidebar: #222120;
    --bg-list: #1A1916;
    --border-color: rgba(255, 255, 255, 0.10);
    --text-main: var(--color-gray-100);
    --text-muted: var(--color-gray-400);
    --text-nav: var(--color-gray-400);
    --hover-bg: rgba(140, 184, 156, 0.10);
    --content-bg: #1A1916;
  }
}


/* ============================================================
   4. UTILITY CLASSES — 实用工具类
   ============================================================ */

/* 背景 */
.bg-base     { background-color: var(--bg-base); }
.bg-surface  { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-sunken   { background-color: var(--bg-sunken); }

/* 品牌背景 */
.bg-brand         { background-color: var(--brand-primary); }
.bg-brand-subtle  { background-color: var(--brand-primary-subtle); }
.bg-brand-muted   { background-color: var(--brand-primary-muted); }

/* 文字 */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-disabled  { color: var(--text-disabled); }
.text-inverse   { color: var(--text-inverse); }
.text-link      { color: var(--text-link); }
.text-brand     { color: var(--brand-primary); }

/* 状态色背景 */
.bg-positive  { background-color: var(--status-positive-bg);  border-color: var(--status-positive-border); }
.bg-warning   { background-color: var(--status-warning-bg);   border-color: var(--status-warning-border); }
.bg-danger    { background-color: var(--status-danger-bg);    border-color: var(--status-danger-border); }
.bg-insight   { background-color: var(--status-insight-bg);   border-color: var(--status-insight-border); }
.bg-neutral   { background-color: var(--status-neutral-bg);   border-color: var(--status-neutral-border); }

/* 状态色文字 */
.text-positive  { color: var(--status-positive-text); }
.text-warning   { color: var(--status-warning-text); }
.text-danger    { color: var(--status-danger-text); }
.text-insight   { color: var(--status-insight-text); }
.text-neutral   { color: var(--status-neutral-text); }

/* 状态 Badge（小圆角标签） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
}
.badge-positive { background: var(--status-positive-badge); color: var(--status-positive-text); border-color: var(--status-positive-border); }
.badge-warning  { background: var(--status-warning-badge);  color: var(--status-warning-text);  border-color: var(--status-warning-border); }
.badge-danger   { background: var(--status-danger-badge);   color: var(--status-danger-text);   border-color: var(--status-danger-border); }
.badge-insight  { background: var(--status-insight-badge);  color: var(--status-insight-text);  border-color: var(--status-insight-border); }
.badge-neutral  { background: var(--status-neutral-badge);  color: var(--status-neutral-text);  border-color: var(--status-neutral-border); }

/* 状态指示点 */
.dot-positive { background-color: var(--status-positive-icon); }
.dot-warning  { background-color: var(--status-warning-icon); }
.dot-danger   { background-color: var(--status-danger-icon); }
.dot-insight  { background-color: var(--status-insight-icon); }
.dot-neutral  { background-color: var(--status-neutral-icon); }

/* 边框 */
.border-subtle  { border: 1px solid var(--border-subtle); }
.border-default { border: 1px solid var(--border-default); }
.border-strong  { border: 1px solid var(--border-strong); }
.border-brand   { border: 1px solid var(--border-brand); }

/* 圆角 */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 阴影 */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* 聚焦环（用于 :focus-visible） */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* 通用卡片 */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 侧边高亮条（blockquote / 备注框） */
.note-bar {
  border-left: 3px solid var(--border-brand);
  background-color: var(--brand-primary-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 14px;
}

/* 主题切换按钮（顶部导航圆形图标按钮） */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
}
.theme-toggle-btn:hover {
  color: var(--brand-primary-hover);
  border-color: var(--border-brand);
  background: var(--state-hover);
}
.theme-toggle-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── Spacing (4px base grid) ── */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* ── Font sizes ── */
:root {
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.82rem;
  --font-size-base: 0.88rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.35rem;
  --icon-size-lg: 2.5rem;
}

/* ── Transitions ── */
:root {
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* ── Z-index scale ── */
:root {
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}