/* ==========================================================================
   RSP 售后服务管理平台 · Design Tokens v1.1
   ---------------------------------------------------------------
   主题：浅色普通风格（页面浅灰底 + 白色卡片 + 深色文本，常规管理系统风格）
   规则：
     - 全站禁止硬编码颜色（唯一例外 #fff / #000），一律引用本文件变量
     - 禁止任何渐变做主视觉（accent 仅纯色 #6366F1，禁紫→粉渐变）
     - 禁止 emoji 作功能图标（图标统一走 Lucide）
     - 间距为 4px 网格；动效 150–250ms；支持 prefers-reduced-motion
   ---------------------------------------------------------------
   加载顺序：本文件必须 先于 style.css 引入（tokens 为源，style.css 消费变量）
   ========================================================================== */

:root {
  /* ========== A1-Identity · 品牌核心 ========== */
  --accent: #6366F1;              /* 品牌强调色（纯色，唯一交互主色） */
  --accent-on: #FFFFFF;           /* accent 背景上的前景色 */
  --accent-hover: #4F52D6;        /* 悬停（浅色主题惯例：向深压 4%） */
  --accent-active: #4346C8;       /* 按下 */
  --accent-soft: rgba(99, 102, 241, 0.10);  /* 强调色淡底（激活菜单/选中态） */

  /* ========== Surface · 表面层（浅色：灰底 + 白卡 + 边框分隔） ========== */
  --bg: #F3F4F7;                  /* 页面背景（浅灰） */
  --surface: #FFFFFF;             /* 卡片/面板表面（白） */
  --surface-2: #F8F9FC;           /* 次级表面（嵌套卡片/输入框底/步骤抽屉） */
  --surface-3: #EEF1F6;           /* 三级表面（hover 行/按压） */
  --border: #E2E6EE;              /* 默认边框 */
  --border-soft: #EAEDF3;         /* 更浅分隔线（行内分割） */
  --border-strong: #D3D9E3;       /* hover/焦点边框 */

  /* ========== Foreground · 前景层（浅色：深色文本） ========== */
  --fg: #1E2430;                  /* 主文本 */
  --fg-2: #3A4250;                /* 次级文本（键值网格的值） */
  --muted: #6B7280;               /* 弱化文本/占位/说明 */
  --meta: #9AA1AC;                /* 元数据/时间戳/辅助说明 */

  /* ========== Semantic · 语义色（浅色下加深保证对比度） ========== */
  --success: #16A34A;
  --success-soft: rgba(22, 163, 74, 0.10);
  --warn: #D97706;
  --warn-soft: rgba(217, 119, 6, 0.10);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.10);

  /* ========== Tag 标签色（浅色主题适配，bg 浅底 + on 深字） ========== */
  --tag-p0-bg: #FDE8E8;    --tag-p0-on: #B91C1C;
  --tag-p1-bg: #FEF0DC;    --tag-p1-on: #B45309;
  --tag-p2-bg: #E9EAFD;    --tag-p2-on: #4F46E5;
  --tag-p3-bg: #EFF1F4;    --tag-p3-on: #6B7280;
  --tag-done-bg: #E3F4EB;  --tag-done-on: #15803D;
  --tag-open-bg: #E9EAFD;  --tag-open-on: #4F46E5;
  --tag-warr-in-bg: #E3F4EB;  --tag-warr-in-on: #15803D;
  --tag-warr-out-bg: #FDE8E8; --tag-warr-out-on: #B91C1C;
  --tag-warr-ext-bg: #E9EAFD; --tag-warr-ext-on: #4F46E5;

  /* ========== 表单控件统一高度（文本框 / 原生下拉 / 可搜索组合框必须等高） ==========
     改高度只需改这里：所有 input/select/combo 在同一场景下取同一变量 */
  --ctl-h: 32px;        /* 标准表单：弹窗、表单页 */
  --ctl-h-tb: 34px;     /* 通用列表工具栏（.toolbar）：客户/设备/知识库等 */
  --ctl-h-lt: 28px;     /* 工单列表整合工具栏（.list-toolbar 胶囊式） */
  --ctl-h-sm: 25px;     /* 紧凑单页表单（工单详情 v6 的 .od-f 字段） */
  --ctl-h-xs: 23px;     /* 表格行内控件（.od-tbl 子表） */
  --ctl-h-act: 26px;    /* 底部操作条内控件（节点调整 / 操作备注） */

  /* ========== Typography · 字体 ========== */
  --font-sans: "Inter", "Noto Sans SC", -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-display: "Inter", "Noto Sans SC", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* 字号（8 级） */
  --text-xs: 12px;    /* 元数据/辅助 */
  --text-sm: 13px;    /* 默认 UI 字号（继承现状，兼顾信息密度） */
  --text-md: 14px;    /* 正文/表单 */
  --text-lg: 16px;    /* 区块标题/正文强调 */
  --text-xl: 18px;    /* 卡片标题 */
  --text-2xl: 20px;   /* 页面标题 */
  --text-3xl: 24px;   /* 概览卡主标题 */
  --text-4xl: 32px;   /* 仅大屏展示数字 */

  /* 行高与字距 */
  --leading-tight: 1.25;      /* 标题 */
  --leading-body: 1.6;        /* 正文 */
  --tracking-caps: 0.08em;    /* ALL CAPS 标签 */
  --tracking-title: -0.01em;  /* 标题负字距 */

  /* ========== Spacing · 4px 网格 ========== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ========== Radius · 圆角 ========== */
  --radius-sm: 4px;     /* 小控件/输入框 */
  --radius-md: 8px;     /* 卡片/按钮 */
  --radius-lg: 12px;    /* 大卡片/抽屉/弹窗 */
  --radius-pill: 9999px;/* 胶囊/标签 */

  /* ========== Elevation · 层级（浅色主题：轻阴影 + 边框） ========== */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 4px 16px rgba(15, 23, 42, 0.12);   /* 弹窗/抽屉 */
  --elev-overlay: 0 8px 32px rgba(15, 23, 42, 0.18); /* 底部操作栏浮层 */

  /* ========== Focus & Motion ========== */
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
  --motion-fast: 150ms;   /* hover/active/折叠 */
  --motion-base: 200ms;   /* 抽屉/面板 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ========== Layout ========== */
  --container-max: 1320px;
  --rail-width: 337px;            /* 桌面右操作面板宽度（工单录入区域，原 375px 缩小 10%） */
  --touch-target: 44px;           /* 最小触摸目标 */
  --actionbar-height: 64px;       /* 移动底部操作栏安全高度 */

  /* ========== 登录页背景（token 化，避免硬编码渐变；浅色蓝灰系，非紫粉） ========== */
  --login-bg: linear-gradient(135deg, #E8EAFF 0%, #F3F4F7 100%);
}

/* ==========================================================================
   旧变量名兼容别名（现有 style.css 引用旧名，保留别名只改值，避免大面积改代码）
   前端迁移完成后可逐步清理 style.css 中的旧名引用
   ========================================================================== */
:root {
  /* 旧名 → 新 Token 的别名（--danger/--success/--bg/--border 已在上面定义，无需重复） */
  --primary: var(--accent);
  --primary-dark: var(--accent-hover);
  --warning: var(--warn);
  --card: var(--surface);
  --text: var(--fg);
  --text-light: var(--muted);
  --sidebar-bg: #EDEFF4;        /* 浅色侧栏（略深于内容区背景，保持导航层级） */
  --sidebar-text: var(--muted);
  --radius: var(--radius-sm);
  --shadow: var(--elev-raised);
  --bg-soft: var(--surface-2);
}

/* ==========================================================================
   基础图标规范（Lucide）
   - 尺寸：16px 行内 / 20px 按钮内 / 24px 独立
   - 移动端（<1024px）stroke-width 2.5 提升可读性
   ========================================================================== */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.menu-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================================================
   动效与无障碍
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 移动端输入 ≥16px，防止 iOS 聚焦自动缩放（P2 弱网/移动优化） */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  [data-lucide] {
    stroke-width: 2.5;
  }
}

/* 焦点可见性：全站统一 focus ring（键盘可达） */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}