/*
 * 立劢文旅AI平台 - 设计系统 CSS 变量（单一真相源）
 * 对应文档：reusable/color-system-baseline.md（完整规范）
 *
 * 所有页面引用变量而非硬编码色值 · 通过 data-theme="dark" 属性切换深色主题
 *
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║  色 token 索引（按域分组 · 详见 color-system-baseline.md）            ║
 * ╠═══════════════════════════════════════════════════════════════════════╣
 * ║ 品牌色（§2.1）       --color-primary[-hover/-active/-light/-border]   ║
 * ║ 语义色（§2.2）       --color-success / -warning / -error / -info      ║
 * ║ 文字色（§2.4.1）     --color-text-{primary|heading|secondary|muted|inverse} ║
 * ║ 背景色（§2.4.2）     --color-{page|sidebar|island|card|input|tag-default}-bg ║
 * ║                                                                       ║
 * ║ 装饰色（§2.3）：                                                       ║
 * ║ ├─ §2.3.1 chart-cat-1..8（echarts 分类专用 8 色循环）                 ║
 * ║ ├─ §2.3.2 grad-asset-a~d / grad-ai-a~c（dashboard KPI 渐变 7 色）     ║
 * ║ ├─ §2.3.3 icon-tile-{5 色}（dashboard 5 入口 tile 渐变形态）          ║
 * ║ ├─ §2.3.4 icon-tile-{5 色}-bg/-fg（浅底+实色 配套 10 token）          ║
 * ║ ├─ §2.3.4-之二 asset-grad-{10 类}（数字资产 9+1 类 145deg 渐变）      ║
 * ║ ├─ §2.3.5 tag-{system|enterprise|app}-bg/-fg（通知 3 类语义色）       ║
 * ║ └─ §2.3.6 type-{agent|workflow|mcp|skill}（AI 应用类型 4 色板）       ║
 * ║                                                                       ║
 * ║ 跨域规范：                                                             ║
 * ║ ├─ 色 token 单一来源原则：所有页面引用 var(--color-*) 不硬编码         ║
 * ║ ├─ 暗色双轨 → dark-mode-baseline.md §二/§九                          ║
 * ║ └─ JS 消费 → color-system-baseline.md §五（cssVar 工具函数）          ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 */

:root {
  /* ===== 主色 ===== */
  --color-primary: #4F6EF7;
  --color-primary-hover: #3D5BD9;
  --color-primary-active: #2F4BC5;
  --color-primary-light: rgba(79, 110, 247, 0.08);
  --color-primary-border: rgba(79, 110, 247, 0.3);

  /* ===== 语义色 ===== */
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #f5222d;
  --color-info: #1890ff;

  /* ===== 浅色主题（默认） ===== */
  --color-page-bg: #f7f8fa;           /* 干净浅灰白，无紫色调 */
  --color-sidebar-bg: #f7f8fa;        /* 与页面同色，无缝融合 */
  --color-island-bg: #ffffff;
  --color-island-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

  --color-text-primary: #1a1a2e;
  --color-text-heading: #3b3b50;         /* 标题专用色：比 primary 柔和，密集展示时不刺眼 */
  --color-text-secondary: #8c8ca1;
  --color-text-muted: #b0b0c0;
  --color-text-inverse: #ffffff;

  --color-menu-hover: rgba(0, 0, 0, 0.04);
  --color-menu-active-bg: rgba(79, 110, 247, 0.08);
  --color-divider: #e8e8f0;
  --color-border: #d9d9e0;

  --color-input-bg: #ffffff;
  --color-input-border: #d9d9e0;
  --color-input-border-focus: var(--color-primary);
  --color-input-placeholder: #b0b0c0;

  --color-card-bg: #ffffff;
  --color-card-border: #e8e8f0;
  --color-conv-nav-line: rgba(26, 26, 46, 0.24);
  --color-conv-nav-line-hover: rgba(26, 26, 46, 0.56);

  --color-tag-default-bg: #f2f3f5;
  --color-tag-default-text: #8c8ca1;

  --color-overlay: rgba(0, 0, 0, 0.4);

  /* 搜索区域背景（浅色模式用黑色低透明度，深色模式用白色低透明度） */
  --color-search-bg: rgba(0, 0, 0, 0.04);
  --color-search-hover: rgba(0, 0, 0, 0.07);

  /* ===== 布局尺寸 ===== */
  --sidebar-width-expanded: 200px;
  /* 收起态宽度：60px（2026-04-16 二次调整）
   * 历史：64 → 48 → 60
   * 原因：sidebar 与 main-content 左 padding（12px）同为 --color-page-bg 浅灰，视觉上合并为一条整列。
   *       48px sidebar + 12px main-content 左 padding = 60px 合并视觉列；图标若只在 48px sidebar 内居中
   *       (x=24)，相对 60px 合并列的中心 (x=30) 偏左 6px，用户眼里"图标不居中"。
   * 修复：把 12px 左 padding 并入 sidebar 自身（宽度 48→60），同时让 collapsed 态下 main-content
   *       去掉 padding-left；图标在 60px 里居中 x=30，与合并列中心一致。
   */
  --sidebar-width-collapsed: 60px;
  --island-radius: 16px;
  --island-padding: 24px;
  --island-gap: 12px;

  /* ===== 菜单 ===== */
  --menu-item-height-l1: 36px;
  --menu-item-height-l2: 32px;
  --menu-text-left: 40px;
  --menu-font-size-l1: 14px;
  --menu-font-size-l2: 13px;
  --menu-indicator-width: 3px;

  /* ===== 圆角 ===== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ===== 间距 ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ===== 字体 ===== */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ===== 过渡 ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.16);

  /* ===== 渐变（dashboard KPI 卡专用） =====
   * 数字资产区 4 色：蓝 / 绿 / 紫 / 橙
   * AI 应用区 3 色：青蓝 / 洋红 / 青绿
   * 新增于 2026-04-24，落地文档 reusable/stats-card-baseline.md §A 色板
   */
  --grad-asset-a: linear-gradient(135deg, #4F6EF7 0%, #2F4BC5 100%);   /* 蓝 · 总资产 */
  --grad-asset-b: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);   /* 绿 · 本月新增 */
  --grad-asset-c: linear-gradient(135deg, #9254de 0%, #722ed1 100%);   /* 紫 · 版权在保 */
  --grad-asset-d: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);   /* 橙 · 引入/输出 */

  --grad-ai-a: linear-gradient(135deg, #36cfc9 0%, #13a8a8 100%);      /* 青 · 本月调用（避开 asset-a 主蓝撞色）*/
  --grad-ai-b: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);      /* 洋红 · 活跃应用 */
  --grad-ai-c: linear-gradient(135deg, #ffc53d 0%, #d48806 100%);      /* 金 · 累计产出（与 ai-a 青拉开色相距离）*/

  /* ===== 图表分类色 palette（echarts pie/bar 等分类场景专用，8 色循环） =====
   * 2026-04-24 新增。用于避免饼图/bar 错误复用 --color-primary/success/warning/info 这些 semantic 色。
   * 色相分布：蓝→绿→橙→洋红→紫→青→黄→灰，两两色相距 ~45°，视觉区分度高。
   */
  --chart-cat-1: #4F6EF7;   /* 蓝 */
  --chart-cat-2: #52c41a;   /* 绿 */
  --chart-cat-3: #fa8c16;   /* 橙 */
  --chart-cat-4: #eb2f96;   /* 洋红 */
  --chart-cat-5: #722ed1;   /* 紫 */
  --chart-cat-6: #13c2c2;   /* 青 */
  --chart-cat-7: #fadb14;   /* 黄 */
  --chart-cat-8: #a0a0b0;   /* 灰 */

  /* ===== tile 图标色（dashboard 快捷应用 5 tiles 入口彩块专用） =====
   * 2026-04-24 新增。抽离原硬编 linear-gradient，语义与 --chart-cat-* 隔离。
   */
  --icon-tile-orange: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
  --icon-tile-blue:   linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  --icon-tile-purple: linear-gradient(135deg, #9254de 0%, #722ed1 100%);
  --icon-tile-green:  linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  --icon-tile-cyan:   linear-gradient(135deg, #13c2c2 0%, #08979c 100%);

  /* ===== tile 图标"浅底 + 实色"配套 token（dashboard / EO 浅染图标块专用） =====
   * 2026-04-25 新增。用于消除 dashboard.css / enterprise-overview.css 同色板硬编码重复。
   * 与上方 --icon-tile-* 渐变是同色板的两形态（渐变=KPI 大卡 / 浅底+实色=方块图标），不可混用。
   * 落地文档 reusable/color-system-baseline.md §二·之三
   */
  --icon-tile-orange-bg: rgba(250, 140, 22, 0.12);   --icon-tile-orange-fg: #fa8c16;
  --icon-tile-blue-bg:   rgba(24, 144, 255, 0.10);   --icon-tile-blue-fg:   #1890ff;
  --icon-tile-purple-bg: rgba(146, 84, 222, 0.10);   --icon-tile-purple-fg: #9254de;
  --icon-tile-green-bg:  rgba(82, 196, 26, 0.10);    --icon-tile-green-fg:  #52c41a;
  --icon-tile-cyan-bg:   rgba(19, 194, 194, 0.10);   --icon-tile-cyan-fg:   #13c2c2;

  /* ===== 通知 tag 三类语义色（system / enterprise / app 三类平级，独立 token）=====
   * 2026-04-25 新增。app 类紫色（#9333ea）此前在 dashboard.css 硬编码，与 system / enterprise 不平级。
   * system → primary 蓝 · enterprise → success 绿 · app → 紫（独立色，避免与现有 5 色板撞色）
   */
  --tag-system-bg:     rgba(79, 110, 247, 0.10);     --tag-system-fg:     var(--color-primary);
  --tag-enterprise-bg: rgba(82, 196, 26, 0.10);      --tag-enterprise-fg: var(--color-success);
  --tag-app-bg:        rgba(147, 51, 234, 0.10);     --tag-app-fg:        #9333ea;

  /* ===== 数字资产 9 类 + total 渐变 token（145deg 双色）=====
   * 2026-04-25 抽 shared。事实色板 icon-system-baseline §4.2.1 已冻结 ·
   * 此前在 5 个 js（asset-upload / asset-manage / approval-list / self-app-review / copyright-center）+
   * 3 个 css（asset-manage / approval-list / self-app-review）共 8 文件硬编码扩散。
   *
   * 跨主题保持同色（事实色相，与 --chart-cat-* 同策略，不做暗色 override）·
   * 用法：CSS `background: var(--asset-grad-image)` · JS inline `style="background: var(--asset-grad-image)"`
   *
   * 状态色复用：approval-list / self-app-review 4 状态色（pending/mine/approved/rejected）
   * 直接复用 audio/total/video/ppt 同色相，不另起 token
   */
  --asset-grad-total:   linear-gradient(145deg, #4F6EF7 0%, #2948CC 100%);   /* 主蓝 · 资产总数 / approve 状态 mine */
  --asset-grad-doc:     linear-gradient(145deg, #1f9df2 0%, #0c6db8 100%);   /* 亮蓝 · 文档 */
  --asset-grad-image:   linear-gradient(145deg, #9B59B6 0%, #6f3c8e 100%);   /* 紫 · 图片 */
  --asset-grad-video:   linear-gradient(145deg, #27AE60 0%, #1a7a43 100%);   /* 绿 · 视频 / 状态 approved */
  --asset-grad-audio:   linear-gradient(145deg, #F39C12 0%, #c47d0a 100%);   /* 金橙 · 音频 / 状态 pending */
  --asset-grad-ppt:     linear-gradient(145deg, #E74C3C 0%, #B83227 100%);   /* 红 · PPT / 状态 rejected */
  --asset-grad-sheet:   linear-gradient(145deg, #1ABC9C 0%, #148F77 100%);   /* 青 · 表格 */
  --asset-grad-model3d: linear-gradient(145deg, #E67E22 0%, #BA6517 100%);   /* 深橙 · 3D 模型 */
  --asset-grad-design:  linear-gradient(145deg, #8E44AD 0%, #6C3483 100%);   /* 深紫 · 设计稿 */
  --asset-grad-other:   linear-gradient(145deg, #95A5A6 0%, #717D7E 100%);   /* 灰 · 其他 */

  /* ===== AI 应用类型 4 色板（icon-system-baseline §4.3.2 已冻结）=====
   * 2026-04-25 抽 shared · 取代 app-center / app-development 两页 4 色硬编码 / page-level alias 重复定义。
   * 业务场景：4 类应用分类视觉（智能体 / 工作流 / MCP / 技能），与各应用个体 tone 色（每应用独立品牌色）解耦。
   * 跨主题保持同色（事实色相）· 详见 icon-system-baseline §4.3.2
   */
  --type-agent:    #4f6ef7;   /* 主蓝（与 --color-primary 同色但语义独立）· 智能体 */
  --type-workflow: #6f61f4;   /* 紫蓝 · 工作流 */
  --type-mcp:      #1f9df2;   /* 亮蓝 · MCP */
  --type-skill:    #13b77a;   /* 翠绿 · 技能 */
}

/* ===== 深色主题 ===== */
[data-theme="dark"] {
  --color-page-bg: #1a1a2e;
  --color-sidebar-bg: #16162a;
  --color-island-bg: #242438;
  --color-island-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

  --color-text-primary: #e8e8f0;
  --color-text-heading: #c8c8d8;         /* 深色模式标题色：同样比 primary 稍柔和 */
  /* 2026-04-24 v16 · 暗色 secondary/muted 提亮 · 修 #55556a 在 #2a2a40 卡底 1.95:1 对比度（远低于 WCAG AA Large 3:1）
   * 实测改前：muted 对比度 1.95:1 几乎贴底；改后 muted #7a7a92 对比度 ~3.2:1 达 AA Large；secondary 同步上调保持 secondary > muted 层级 */
  --color-text-secondary: #8c8ca0;
  --color-text-muted: #7a7a92;

  --color-menu-hover: rgba(255, 255, 255, 0.06);
  --color-menu-active-bg: rgba(79, 110, 247, 0.15);
  --color-divider: #2e2e45;
  --color-border: #3a3a50;

  --color-input-bg: #2a2a40;
  --color-input-border: #3a3a50;
  --color-input-placeholder: #55556a;

  --color-card-bg: #2a2a40;
  --color-card-border: #3a3a50;
  --color-conv-nav-line: rgba(255, 255, 255, 0.3);
  --color-conv-nav-line-hover: rgba(255, 255, 255, 0.72);

  --color-tag-default-bg: #2a2a40;
  --color-tag-default-text: #6b6b80;

  --color-overlay: rgba(0, 0, 0, 0.6);

  --color-search-bg: rgba(255, 255, 255, 0.06);
  --color-search-hover: rgba(255, 255, 255, 0.1);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.5);

  /* 渐变暗色：亮度 -10~20%，保持饱和度，避免暗色底反光刺眼 */
  --grad-asset-a: linear-gradient(135deg, #3D5BD9 0%, #2439A8 100%);   /* 蓝 · 总资产 */
  --grad-asset-b: linear-gradient(135deg, #449016 0%, #2d780a 100%);   /* 绿 · 本月新增 */
  --grad-asset-c: linear-gradient(135deg, #7540c0 0%, #5e24b2 100%);   /* 紫 · 版权在保 */
  --grad-asset-d: linear-gradient(135deg, #d97613 0%, #b05506 100%);   /* 橙 · 引入/输出 */

  --grad-ai-a: linear-gradient(135deg, #1fadac 0%, #0d7c7a 100%);      /* 青 · 本月调用 */
  --grad-ai-b: linear-gradient(135deg, #c4247e 0%, #a01867 100%);      /* 洋红 · 活跃应用 */
  --grad-ai-c: linear-gradient(135deg, #d9a832 0%, #b2700a 100%);      /* 金 · 累计产出 */

  /* 图表分类色暗色（亮度保持，略降饱和避免刺眼） */
  --chart-cat-1: #597ef7;
  --chart-cat-2: #73d13d;
  --chart-cat-3: #ffa940;
  --chart-cat-4: #f759ab;
  --chart-cat-5: #9254de;
  --chart-cat-6: #36cfc9;
  --chart-cat-7: #ffec3d;
  --chart-cat-8: #8c8c9e;

  /* tile 图标暗色（饱和度略降） */
  --icon-tile-orange: linear-gradient(135deg, #d97613 0%, #b05506 100%);
  --icon-tile-blue:   linear-gradient(135deg, #1477d6 0%, #0658b5 100%);
  --icon-tile-purple: linear-gradient(135deg, #7540c0 0%, #5e24b2 100%);
  --icon-tile-green:  linear-gradient(135deg, #449016 0%, #2d780a 100%);
  --icon-tile-cyan:   linear-gradient(135deg, #109e9e 0%, #067980 100%);

  /* tile "浅底 + 实色"配套暗色 override · 浅底提亮到 0.20 让暗卡底（#2a2a40）上轮廓清晰
   * 实色不变（事实色相，跨主题保持识别）· 对齐 ol-title-icon 暗色策略（dark-mode-baseline §三）
   */
  --icon-tile-orange-bg: rgba(250, 140, 22, 0.20);
  --icon-tile-blue-bg:   rgba(24, 144, 255, 0.20);
  --icon-tile-purple-bg: rgba(146, 84, 222, 0.20);
  --icon-tile-green-bg:  rgba(82, 196, 26, 0.20);
  --icon-tile-cyan-bg:   rgba(19, 194, 194, 0.20);

  /* tag 三类语义色暗色 override · 浅底同样提亮到 0.20 */
  --tag-system-bg:     rgba(79, 110, 247, 0.20);
  --tag-enterprise-bg: rgba(82, 196, 26, 0.20);
  --tag-app-bg:        rgba(147, 51, 234, 0.20);
}