/* ============================================================================
   大士元 · 统一后台  设计令牌 Design Tokens
   ----------------------------------------------------------------------------
   三层结构：
     L1 基础色板 (palette)   —— 只定义，业务禁止直接使用
     L2 语义令牌 (semantic)  —— 组件唯一允许使用的层
     L3 组件令牌 (component) —— 尺寸/圆角/阴影/字号，消灭硬编码
   兼容说明：保留 2026-10-22 前既有的全部变量名（--pri / --line / --sub / --dim
   / --ok / --err / --warn / --info / --card / --bg / --txt / --side-* 等），
   27 个业务模块无需改动即可继续取色。
   ========================================================================== */

/* ---------------------------------------------------------------- L1 基础色板 */
:root {
  /* 品牌绿（主色） */
  --green-25:  #F2FBF6;
  --green-50:  #E7F6EF;
  --green-100: #C9EBDA;
  --green-200: #9BDCC0;
  --green-300: #5FC79C;
  --green-400: #2FB183;
  --green-500: #0A9568;   /* 原品牌绿，现保留作「成功 / 良好」语义色系 */
  --green-600: #0B7A55;
  --green-700: #095F43;
  --green-800: #07452F;
  --green-900: #052E20;

  /* 品牌主色 = 薄荷绿 #35D2A6（2026-11-07 由鸿蒙蓝改为薄荷绿，11-09 整体提亮一档）。
     侧栏 / 顶栏这类「框架面」用下面的 --chrome-* 深一档薄荷绿，
     与主色拉开层次，避免整屏一块绿。
     注意：上面的 --green-* 色板必须保留 —— 它承担「成功 / 良好」语义
     （如 perf_pc 的等级分布用 green-300 表示「良」），不随主色变。
     实底按钮统一取 700（白字对比约 3.1:1），500 只用于高亮、描边与浅底。 */
  --brand-25:  #F2FEFB;
  --brand-50:  #E9FCF6;
  --brand-100: #CDF6E8;
  --brand-200: #A4EDD8;
  --brand-300: #79E3C6;
  --brand-400: #4FD9B2;
  --brand-500: #35D2A6;   /* 品牌主色 = 薄荷绿（2026-11-09 整体提亮一档） */
  --brand-600: #22C79A;
  --brand-700: #14A583;
  --brand-800: #118A6D;
  --brand-900: #0E745B;

  /* 框架面（侧栏 / 顶栏）= 深薄荷绿 */
  --chrome-400: #17A186;
  --chrome-500: #149578;
  --chrome-600: #11846A;
  --chrome-700: #0D6E57;
  --chrome-800: #0B5A47;

  /* 中性灰 */
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFDFE;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E3E8EF;
  --gray-300: #CBD5E1;
  --gray-400: #98A2B3;
  --gray-500: #64748B;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;

  /* 辅助色（2026-10-23 对齐鸿蒙语义色板：信息蓝 / 警示橙 / 危险红） */
  --blue-50:  #EDF5FF;  --blue-500:  #007DFF;  --blue-700:  #0057B8;
  --amber-50: #FFF2E8;  --amber-500:  #E87722;  --amber-700:  #A34F00;
  --red-50:   #FFECEC;  --red-500:    #E8383B;  --red-600:    #D42F32;  --red-700: #B32024;
  --gold-500: #C9A063;
}

/* ------------------------------------------------------------- L2 语义令牌 */
:root {
  /* —— 品牌 / 主色 —— */
  --pri:            var(--brand-700);
  --pri-hover:      var(--brand-800);
  --pri-active:     var(--brand-900);
  --pri-bg:         var(--brand-50);
  --pri-bg-hover:   var(--brand-100);
  --pri-border:     var(--brand-200);
  --pri-text:       var(--brand-800);
  --pri-ring:       rgba(20, 165, 131, .16);
  /* 旧变量名兼容别名 */
  --pri-light:      var(--brand-500);
  --pri-lighter:    var(--brand-50);
  --brand:          var(--pri);

  /* —— 功能色（鸿蒙语义色板：成功绿 / 警示橙 / 危险红 / 信息蓝）—— */
  --info:           var(--blue-500);
  --info-soft:      var(--blue-50);
  --info-text:      var(--blue-700);
  --ok:             #00801A;   /* 鸿蒙 success-fg：浅底文字级对比度达标 */
  --ok-soft:        #E6F7EF;
  --warn:           var(--amber-500);
  --warn-soft:      var(--amber-50);
  --warn-text:      var(--amber-700);
  --err:            var(--red-500);
  --err-soft:       var(--red-50);
  --err-text:       var(--red-700);
  --err-hover:      var(--red-600);
  --gold:           var(--gold-500);

  /* —— 中性 / 表面（鸿蒙中性层，去绿调）—— */
  --bg:             #F1F3F5;
  --bg-subtle:      #EBEDF0;
  --card:           var(--gray-0);
  --card-subtle:    #F5F6F8;
  --line:           rgba(0, 0, 0, .10);
  --line-soft:      rgba(0, 0, 0, .06);
  --line-strong:    rgba(0, 0, 0, .16);

  /* —— 文字（鸿蒙四级：正文 16.9:1 / 次要 7.4:1 / 辅助 4.6:1，均过 WCAG AA）—— */
  --txt:            #1A1A1A;
  --txt-secondary:  #5A5A5A;
  --txt-muted:      #767676;
  --txt-inverse:    var(--gray-0);
  /* 旧变量名兼容别名 */
  --sub:            var(--txt-secondary);
  --dim:            var(--txt-muted);

  /* —— 侧栏（深薄荷绿实底 + 白色文字，选中项用主色实底）—— */
  --side-w:         244px;
  --side-w-mini:    60px;
  --side-bg:        var(--chrome-500);
  --side-bg-solid:  var(--chrome-500);
  --side-hover:     rgba(255, 255, 255, .10);
  --side-sep:       rgba(255, 255, 255, .14);
  --side-text:      rgba(255, 255, 255, .86);
  --side-text-on:   #FFFFFF;

  /* —— 顶栏（与侧栏同色；玻璃半透明保留下方滚动透出）—— */
  --topbar-h:       56px;
  --topbar-bg:      var(--chrome-500);
  --topbar-glass:   rgba(20, 149, 120, .94);
  --topbar-border:  rgba(255, 255, 255, .14);
  --topbar-text:    #FFFFFF;

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "MiSans",
               "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------------------------------------------------------------- 暗色主题 */
[data-theme="dark"] {
  --pri:            var(--brand-400);
  --pri-hover:      var(--brand-300);
  --pri-active:     var(--brand-200);
  --pri-bg:         rgba(79, 217, 178, .14);
  --pri-bg-hover:   rgba(79, 217, 178, .22);
  --pri-border:     rgba(79, 217, 178, .38);
  --pri-text:       var(--brand-300);
  --pri-ring:       rgba(79, 217, 178, .28);
  --pri-light:      var(--brand-300);
  --pri-lighter:    rgba(79, 217, 178, .16);

  /* 鸿蒙深色语义色板：纯黑底 + 抬升表面 */
  --info:           #4C9BFF;  --info-soft:  #10203A;            --info-text: #8FC0FF;
  --ok:             #6BE0A6;  --ok-soft:    #10281E;
  --warn:           #FF9A4D;  --warn-soft:  #2E1D0E;            --warn-text: #FFB877;
  --err:            #FF6B6E;  --err-soft:   #331418;            --err-text:  #FF9093;
  --err-hover:      #FF8589;

  --bg:             #0D0D0F;
  --bg-subtle:      #232327;
  --card:           #1A1A1D;
  --card-subtle:    #232327;
  --line:           rgba(255, 255, 255, .10);
  --line-soft:      rgba(255, 255, 255, .06);
  --line-strong:    rgba(255, 255, 255, .16);

  --txt:            #E8E8E8;
  --txt-secondary:  #AEB3B8;
  --txt-muted:      #8A9096;

  --side-bg:        #0A3C31;
  --side-bg-solid:  #0A3C31;
  --side-hover:     rgba(255, 255, 255, .06);
  --side-sep:       rgba(255, 255, 255, .10);
  --side-text:      rgba(255, 255, 255, .78);
  --side-text-on:   var(--brand-300);

  --topbar-bg:      #0A3C31;
  --topbar-glass:   rgba(10, 60, 49, .92);
  --topbar-text:    #E8E8E8;
}

/* ------------------------------------------------------------- L3 组件令牌 */
:root {
  /* 圆角（2026-10-23 鸿蒙大圆角卡片语言：输入 12 / 标准卡 16 / 大卡 20） */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* 间距（4pt 基准） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* 字号层级 */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-hero: 30px;   /* 顶级标题（备用）：仅用于真正的页面顶头，勿用于内容区标题 */

  /* 行高 */
  --lh-tight: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.8;

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

  /* 控件尺寸 */
  --btn-h:        34px;
  --btn-h-sm:     28px;
  --btn-h-lg:     40px;
  --btn-fs:       var(--fs-md);
  --btn-fs-sm:    var(--fs-sm);
  --input-h:      34px;
  --input-h-lg:   38px;
  --row-h:        40px;
  --tbl-fs:       var(--fs-sm);
  --th-fs:        var(--fs-xs);

  /* 阴影（鸿蒙三层柔和阴影，无硬边） */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .07);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .16);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, .22);

  /* 鸿蒙玻璃质感（2026-10-22 移植自 ui-redesign/assets/design-system.css）
     三要素：半透明底色 + 背景模糊 + 饱和度提升。
     这里用 rgba 而非原稿的 color-mix() —— color-mix 需 Chrome 111+，
     后台要兼容更老的浏览器，故改为等效的 rgba。 */
  --glass-bg:        rgba(255, 255, 255, .82);
  --glass-bg-strong: rgba(255, 255, 255, .92);
  --glass-blur:      saturate(180%) blur(16px);
  --glass-border:    rgba(16, 24, 40, .08);
}
[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .60);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, .70);
  /* 深色下玻璃改为「深色半透明」，避免内容透过时发白 */
  --glass-bg:        rgba(18, 20, 24, .78);
  --glass-bg-strong: rgba(18, 20, 24, .90);
  --glass-border:    rgba(255, 255, 255, .10);
}

/* 动效令牌（2026-10-22 抄自 D:\小程序\2-PC工作站+后端+运营后台\
   web\assets\crm\design-tokens.css）
   后台此前完全没有动效体系：14 处 transition 全是零散硬编码，
   没有缓动曲线、没有时长档位、也没有「减少动态效果」支持。 */
:root {
  --motion-hover: 120ms;   /* hover / active 变色 */
  --motion-enter: 200ms;   /* 抽屉 / 模态进入 */
  --motion-max:   400ms;   /* 上限，任何动效不得超过此值 */
  /* 鸿蒙优雅曲线（2026-10-23 对齐 ui-redesign：标准 / 减速入场 / 回弹反馈） */
  --ease-std:     cubic-bezier(.20, 0, 0, 1);
  --ease-out:     cubic-bezier(0, 0, .20, 1);
  --ease-spring:  cubic-bezier(.34, 1.40, .64, 1);
}
/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-hover: 0ms; --motion-enter: 0ms; }
}

/* ---------------------------------------------------- 统一滚动条（明暗通用） */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--txt-muted); }