/* ============================================================
 * 咖莱翼 · 设计令牌层（Design Tokens）
 * ------------------------------------------------------------
 * 【为什么要分三层】—— 每层只管一件事，改哪层只影响哪层：
 *
 *   Layer 1  Primitive  基础色板 / 尺度   → 换品牌、换色系：只改这层
 *   Layer 2  Semantic   语义别名         → 换风格、调语义色：只改这层
 *   Layer 3  Layout     布局尺度         → 改间距/圆角/字号/列数：只改这层
 *
 * 【改动示例】
 *   换品牌主色    → 改 --blue-500 一处，全站主色同步
 *   危险色偏柔和  → 改 --danger 的指向（如 --red-400）即可
 *   KPI 卡 4列→3列 → 改 --cols-kpi: 3 一处
 *   全站更紧凑    → 改 --space-* 系列，所有间距等比缩放
 *
 * ⚠️ 本文件只"定义变量"，不写任何选择器样式，因此不会改变现有视觉。
 *    引入顺序必须在 style.css 之前。
 * ============================================================ */

:root {
  /* ==========================================================
   * Layer 1 · Primitive —— 基础色板
   * 换品牌 / 换色系时，只动这里
   * ========================================================== */

  /* —— 品牌蓝（画布主色 #1D6DF0 为基准）—— */
  --blue-50:  #E6F1FB;
  --blue-100: #CCE3F8;
  --blue-200: #99C7F0;
  --blue-300: #66ABE8;
  --blue-400: #338FE0;
  --blue-500: #1D6DF0;   /* ★ 品牌主蓝（画布主色） */
  --blue-600: #1668DC;
  --blue-700: #0C447C;   /* 深蓝（画布辅助色） */
  --blue-800: #093661;
  --blue-900: #062646;

  /* —— 中性灰 —— */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F5F7FA;
  --gray-100: #EEF1F5;
  --gray-200: #E0E6ED;
  --gray-300: #CBD5E0;
  --gray-400: #A0AEC0;
  --gray-500: #7F8C8D;
  --gray-600: #5A6B7B;
  --gray-700: #2C3E50;
  --gray-800: #1F2D3D;
  --gray-900: #141E28;

  /* —— 功能色板 —— */
  --green-50:  #E8F8F0;
  --green-400: #58D68D;
  --green-500: #27AE60;
  --green-600: #219653;

  --orange-50:  #FEF5E7;
  --orange-400: #F5B041;
  --orange-500: #F39C12;
  --orange-600: #D68910;

  --red-50:  #FDEDEC;
  --red-400: #EC7063;
  --red-500: #E74C3C;
  --red-600: #CB4335;

  /* —— 平台品牌色（业务固定，勿随意改）—— */
  --brand-taobao:  #FF5000;  /* 淘宝闪购 */
  --brand-meituan: #FFC300;  /* 美团外卖 */
  --brand-jd:      #E1251B;  /* 京东秒送 */

  /* ==========================================================
   * Layer 2 · Semantic —— 语义别名
   * 改风格 / 调语义色时，只动这里（改"指向"即可，不动色板）
   * ⚠️ 以下变量名与 style.css 原 :root 保持一致，确保 185 处
   *    既有 var() 引用零改动继续生效
   * ========================================================== */

  --primary:        var(--blue-500);
  --primary-dark:   var(--blue-700);
  --primary-light:  var(--blue-50);

  /* ★ 主色的 RGB 三元组：给 rgba() 用（如焦点光晕、hover 底色）
   *   用法：rgba(var(--primary-rgb), 0.12)
   *   为什么需要它：CSS 变量存的是 hex，无法直接接透明度，
   *   所以带 alpha 的场景必须用「R, G, B」形式。
   *   ⚠️ 换主题/自定义主色时，此值由 js/theme.js 同步更新。 */
  --primary-rgb:    29, 109, 240;

  /* ★ 侧栏语义色（应用外壳 shell.css 专用）
   *   全部"指向" --blue-* 色板，因此换色系时侧栏自动跟随，
   *   shell.css 零改动。改侧栏深浅只需改这里的指向。 */
  --sidebar-bg:          var(--blue-700);   /* 侧栏底 */
  --sidebar-bg-deep:     var(--blue-900);   /* 品牌区底 */
  --sidebar-text:        var(--blue-100);   /* 未选中文字 / 图标 */
  --sidebar-text-strong: var(--gray-0);     /* 选中态 / 用户名 */
  --sidebar-active:      var(--blue-500);   /* 选中态底色 / 头像底 */
  --sidebar-hover:       rgba(255, 255, 255, .08);
  --sidebar-divider:     rgba(255, 255, 255, .12);

  /* ★ 恒定深色表面（顶栏 gnav：不随 light/dark 主题反转，白字对比度恒定 ≥4.5:1）
   *   与 --sidebar-* 不同：后者指向品牌蓝、随色系走；本组是中性深石板，
   *   无论换什么主题，顶栏都是同一片深色。shell.css 只引用本组，不写死 hex。 */
  --bg-dark:        #1c2331;   /* 顶栏底（中性深石板） */
  --bg-dark-hover:  #29334a;   /* 顶栏 hover 底 */
  --bd-on-dark:     rgba(255, 255, 255, .10);  /* 顶栏分隔线 */
  --fg-on-dark:     #e9eef7;   /* 深色面上的主文字（近白） */
  --fg-on-dark-dim: #98a5b6;   /* 深色面上的弱化文字 */

  /* ★ 落地页深色区语义色（landing.html 专用：深色板块 / CTA / 页脚）
   *   同样"指向" --blue-* 色板 → 换色系时落地页深色区自动跟随，landing.html 零改动。
   *   ⚠️ 落地页主调性为「浅主深辅」：白底顶栏 + 浅蓝 Hero + 白底卡片，
   *      深色仅用于下半页（数据板块 / CTA / 页脚）做对比点缀，不要扩大到全页。 */
  --hero-bg:         var(--blue-900);   /* 深色板块底 */
  --hero-bg-soft:    var(--blue-800);   /* 深色渐变次色 */
  --hero-bg-deep:    var(--gray-900);   /* 页脚更深底 */
  --hero-text:       var(--gray-0);     /* 深色区主文字 */
  --hero-text-sub:   var(--blue-200);   /* 深色区副文字 */
  --hero-text-mute:  var(--blue-300);   /* 深色区弱化文字 */

  --success:        var(--green-500);
  --success-light:  var(--green-50);
  --warning:        var(--orange-500);
  --warning-light:  var(--orange-50);
  --danger:         var(--red-500);
  --danger-light:   var(--red-50);

  --bg:             var(--gray-50);
  --card-bg:        var(--gray-0);
  --text:           var(--gray-700);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --border:         var(--gray-200);
  --border-light:   var(--gray-100);
  --border-dark:    var(--gray-300);

  /* ★ 主色填充面上的前景文字色。
   *   为什么需要独立 token：主色是可换的（主题引擎会改 --primary），
   *   深色主题或换肤后白字可能对比不足，集中一处才能统一调整。
   *   ⚠️ 业务样式里不要再写死 #fff —— 一律用 --text-on-primary。 */
  --text-on-primary: var(--gray-0);

  /* ==========================================================
   * Layer 3 · Layout Scale —— 布局尺度
   * 改间距 / 圆角 / 字号 / 阴影 / 层级 / 栅格列数时，只动这里
   * ========================================================== */

  /* —— 间距（4px 基准，8 档）—— */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* —— 字号（7 档）—— */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;

  /* —— 行高 —— */
  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

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

  /* —— 圆角（5 档）—— */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius:      8px;   /* 兼容既有引用 */
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* —— 阴影（4 档）—— */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow:    0 2px 8px rgba(0, 0, 0, .06);   /* 兼容既有引用 */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, .1);   /* 兼容既有引用 */
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, .14);

  /* —— 层级 —— */
  --z-base:    1;
  --z-sticky:  100;
  --z-dropdown:200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* —— 栅格 / 版面变量（★ 改布局的"总开关"）—— */
  --cols-kpi:     4;      /* KPI 概览卡列数：改 3 即三列 */
  --cols-card:    3;      /* 卡片区列数 */
  --cols-form:    2;      /* 表单区列数 */
  --grid-gap:     var(--space-4);
  --grid-gap-lg:  var(--space-5);

  /* —— 自适应栅格最小列宽（不写死列数，按宽度自动换行）——
   *   调大 = 列更少更宽；调小 = 列更多更窄。
   *   三档与 layout.css 的 .grid-auto-sm / .grid-auto / .grid-auto-lg 一一对应，
   *   取值与原先写在各处的兜底值完全一致，因此接入后视觉零变化。 */
  --col-min-sm:   140px;
  --col-min:      200px;
  --col-min-lg:   280px;

  /* —— 条目行固定列宽（.item-row 用：主列自适应 + 数值列等宽 + 操作列固定）—
   *   改 --col-num 即统一收窄/放宽所有数值输入；改 --col-act 调整操作列。 */
  --col-num:      120px;
  --col-act:      40px;

  --container-max:  1400px;   /* 主内容最大宽度 */
  --container-pad:  var(--space-5);

  /* —— 外壳宽度（画布 v4 定稿骨架：左侧固定栏 + 内容区）——
   *   --sidebar-w-current 是「实际生效宽度」：折叠时由 .sb-collapsed 覆盖为收起值，
   *   侧栏 / 内容区所有尺寸都引用它，因此折叠只需切一个变量。 */
  --sidebar-w:            156px;   /* 展开宽度（E店通左子栏，页级导航） */
  --sidebar-w-collapsed:  52px;    /* 折叠宽度：只留图标 */
  --sidebar-w-current:    var(--sidebar-w);

  --header-h:       72px;    /* 页面头 / 品牌区高度（画布 v4 定稿） */
  --demo-banner-h:  38px;    /* demo/test 环境顶部横幅高度（ sticky 让位用） */
  --row-h:          44px;     /* 表格行高 */
  --radius-card:    var(--radius-lg);

  /* —— 内容区宽度断点（自适应列数用）——
   *   ★ 这里是【内容区】宽度，不是视口宽度。
   *   侧栏折叠 → 内容区变宽 → 自动升档；窗口变窄 → 自动降档。
   *   js/shell.js 读取这三个值并写入 .page-body[data-cw]，
   *   调档位改这里即可，无需动 JS。 */
  --cw-xl: 1000px;   /* ≥1000 满列（KPI 4 / 卡片 3 / 表单 2） */
  --cw-lg:  800px;   /* ≥800  减一列 */
  --cw-md:  560px;   /* ≥560  两列 */

  /* —— 断点（仅作文档标注，实际媒体查询写在 layout.css）—— */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl:1400px;
}

/* ==========================================================
 * 响应式列数兜底
 * ------------------------------------------------------------
 * 【为什么必须有这段】
 *   --cols-kpi / --cols-card / --cols-form 是「用户可配置」的总开关，
 *   面板里设成 4 列、6 列在桌面端没问题，但窄屏会挤爆。
 *   这里做兜底：窄屏强制收敛，且**优先级低于用户的显式设置**——
 *   用户在面板里选的列数写在 <html> 的 style 上（内联样式优先级更高），
 *   本段只影响「用户没显式设置」的默认档，因此不会覆盖面板选择。
 *
 * 【怎么用】
 *   桌面端切列数 → 面板里改，或改上方 :root 的值；
 *   窄屏自动收敛 → 本段已处理，无需干预。
 * ========================================================== */
@media (max-width: 992px) {
  :root {
    --cols-kpi:  2;
    --cols-card: 2;
    --cols-form: 1;
    --demo-banner-h: 34px;   /* 与 style.css 小屏 .demo-banner 高度一致 */
  }
}
@media (max-width: 576px) {
  :root {
    --cols-kpi:  1;
    --cols-card: 1;
    --cols-form: 1;
  }
}