/* ==========================================================================
 * design-tokens.css — 全局设计令牌（z-index / 阴影 / 颜色）
 *
 * 加载位置：resource_css.jsp（iframe）+ sysIndex-ecaps.jsp（主框架）
 * 所有页面共享，插件 class-scoped 变量不在此声明
 * ========================================================================== */
:root {
    /* ===== 颜色 ===== */
    --color-primary: #376aea;
    --color-primary-hover: #2d5bd0;      /* 主按钮 hover 加深态 */
    --color-text: var(--gray-12);        /* 桥接 gray 梯（值等价，零变化）；新代码用 --text-primary */
    --color-text-strong: #000000;        /* 强调文字（弹窗标题等需要加重对比的场景） */
    --color-text-secondary: var(--gray-11);  /* 桥接（旧 #707070）；新代码用 --text-secondary */
    --color-border: var(--gray-7);       /* 桥接（旧 #cecece）；新代码用 --border-default */
    --color-border-light: var(--gray-3); /* 桥接（旧 #f0f0f0，极浅分隔）；新代码用 --border-subtle */
    --color-bg-header: #ebf3ff;
    --color-primary-light: #E0ECFD;
    --color-drawer-title-bg: #D2DEFD;    /* 抽屉标题背景（bottom/right 抽屉共用） */
    --color-selected: #ffdea6;
    --color-bg-stripe: var(--gray-2);    /* 桥接（旧 #f9fafb，斑马纹）；新代码用 --surface-subtle */
    --color-danger: #ff1578;             /* 独立品红语义，不并入 error（并即可见色变）保留 */

    /* ===== 语义色（状态/反馈）===== */
    --color-error: #cf1322;            /* 逾期 / 错误文字 */
    --color-error-bg: #fff1f0;         /* 错误背景 */
    --color-error-border: #ffa39e;     /* 错误边框（与 warning-border 对称） */
    --color-warning: #d97706;          /* 警告文字（琥珀） */
    --color-warning-bg: #fffbeb;       /* 警告背景 */
    --color-warning-border: #fde68a;   /* 警告边框 */
    --color-success: #059669;          /* 成功文字（绿） */
    --color-success-bg: #f0fdf4;       /* 成功背景 */
    --color-success-border: #b7eb8f;   /* 成功边框（与 warning-border 对称） */
    --color-info: #722ed1;             /* 信息文字（紫，用于委派/SubAgent 等"补充流程"语义） */
    --color-info-bg: #f9f0ff;          /* 信息背景 */
    --color-info-border: #d3adf7;      /* 信息边框 */
    --color-neutral-text: var(--gray-11);  /* 桥接 + 双灰梯归并（旧 #6b7280 → gray-11）；新代码用 --text-secondary */
    --color-neutral-bg: var(--gray-3);     /* 桥接 + 归并（旧 #f3f4f6 → gray-3）；新代码用 --surface-subtle */

    /* ===== 档位色阶（绿→黄→橙→红 4 档，"越大越压手/越危"语义；如库存周转热值）=====
       每档四件套：solid 圆点/主色 · soft 渐变带浅色端 · bg 药丸背景 · text 药丸文字
       渐变带 = linear-gradient(180deg, soft, solid)；药丸 = bg + text */
    --color-grade-green: #22c55e;      --color-grade-green-soft: #34d27f;  --color-grade-green-bg: #ecfdf3;  --color-grade-green-text: #15803d;
    --color-grade-yellow: #f59e0b;     --color-grade-yellow-soft: #fbbf24; --color-grade-yellow-bg: #fffbeb; --color-grade-yellow-text: #b45309;
    --color-grade-orange: #f97316;     --color-grade-orange-soft: #fb923c; --color-grade-orange-bg: #fff7ed; --color-grade-orange-text: #c2410c;
    --color-grade-red: #ef4444;        --color-grade-red-soft: #f87171;    --color-grade-red-bg: #fef2f2;    --color-grade-red-text: #b91c1c;
    /* teal 不属"越危"梯，是中性进行态语义（待阅/处理中等），并列归此供状态标签复用 */
    --color-grade-teal: #23c6c8;       --color-grade-teal-soft: #45d3d5;   --color-grade-teal-bg: #e6fafb;   --color-grade-teal-text: #0d7d80;

    /* ===== 原始层 primitive：单一灰梯 12 步工位制（对标 Radix）=====
       禁直接用在组件——只供下方语义层 / 别名桥引用。极轻冷调 = "被设计过"的高级感。
       锚定现有值零变化：gray-2=旧 bg-stripe / gray-3≈旧 border-light / gray-7≈旧 border / gray-11≈旧 text-secondary / gray-12=旧 text */
    --gray-1: #fcfcfd;     /* 应用背景 */
    --gray-2: #f9fafb;     /* 次级背景 / 斑马纹 */
    --gray-3: #f0f1f3;     /* 组件面 / 极浅分隔 */
    --gray-4: #e8eaed;     /* 组件面 hover */
    --gray-5: #dfe1e5;     /* 组件面 active */
    --gray-6: #d4d7dc;     /* 发丝边框 / 分隔 */
    --gray-7: #cdced2;     /* 默认边框 / focus */
    --gray-8: #b0b3b9;     /* 强边框 */
    --gray-9: #8a8d93;     /* 实色 / 禁用文字 */
    --gray-10: #787b81;    /* 实色 hover / 标注 */
    --gray-11: #6e7176;    /* 次级文字（归并旧 text-secondary #707070 + neutral-text #6b7280） */
    --gray-12: #222222;    /* 主文字 */

    /* ===== 原始层 primitive：品牌蓝梯 12 步（step9 = #376aea 品牌不变）===== */
    --blue-1: #fbfdff;
    --blue-2: #f4f8ff;
    --blue-3: #e6efff;     /* 淡底 / focus 环 */
    --blue-4: #d5e4ff;
    --blue-5: #c0d6ff;
    --blue-6: #a6c3fb;
    --blue-7: #82a8f5;     /* 强调边框 */
    --blue-8: #5b8bef;
    --blue-9: #376aea;     /* 品牌实色 / 主按钮 */
    --blue-10: #2d5bd0;    /* hover */
    --blue-11: #2f5ec9;    /* 强调文字 */
    --blue-12: #16264f;    /* 深 */

    /* ===== 语义层 semantic：角色名（新代码唯一入口，组件只引这层）=====
       暗色模式只需另写一组指向即可，无需碰组件。 */
    --surface-base: #ffffff;
    --surface-subtle: var(--gray-2);     /* 次级背景区 */
    --surface-sunken: var(--gray-2);     /* 凹陷区 */
    --surface-hover: var(--gray-3);      /* 可交互面 hover */
    --surface-active: var(--gray-4);     /* 可交互面 active */
    --border-subtle: var(--gray-6);      /* 发丝边框 / 分隔线 */
    --border-default: var(--gray-7);     /* 输入框 / 默认边框 */
    --border-strong: var(--gray-8);      /* 强边框 */
    --text-primary: var(--gray-12);      /* 主文字 */
    --text-secondary: var(--gray-11);    /* 次级文字 / label */
    --text-tertiary: var(--gray-10);     /* 标注 / 占位 */
    --text-disabled: var(--gray-9);      /* 禁用文字 */
    --text-on-accent: #ffffff;           /* 实色底上的文字 */
    --accent-solid: var(--blue-9);       /* 品牌实色 / 主按钮（= --color-primary） */
    --accent-hover: var(--blue-10);      /* 主按钮 hover */
    --accent-subtle-bg: var(--blue-3);   /* focus 环 / 选中淡底 */
    --accent-border: var(--blue-7);      /* 强调边框 */
    --accent-text: var(--blue-11);       /* 强调文字 / 链接 */

    /* ===== 阴影 ===== */
    /* 阴影统一染冷调 rgba(16,24,40)（对标 SaaS，纯黑会发"肉"；沿用 --shadow-modal-strong 基调） */
    --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
    --shadow-sm: 0 2px 8px rgba(16,24,40,0.07);
    --shadow-md: 0 4px 16px rgba(16,24,40,0.09);
    --shadow-lg: 0 8px 24px rgba(16,24,40,0.13);
    --shadow-primary: 0 2px 8px rgba(24,144,255,0.2);
    --shadow-dropdown: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    --shadow-panel: 0 6px 12px -4px rgba(0, 0, 0, 0.15);
    --shadow-menu: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 0 0 1px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08);
    --shadow-modal-strong: 0 24px 60px -12px rgba(16,24,40,0.22), 0 8px 24px -8px rgba(16,24,40,0.12);  /* 浮层弹窗强阴影（对标 SaaS modal，替代边框表达层级） */

    /* ===== z-index：全局层级 ===== */
    --z-content: 1;
    --z-content-top: 10;
    --z-fixed: 100;
    --z-fixed-toggle: 101;
    --z-navbar: 1000;
    --z-navbar-tab: 1032;
    --z-navbar-controls: 1098;
    --z-sidebar-panel: 1100;
    --z-dropdown: 2000;
    --z-tooltip: 4070;
    --z-modal-backdrop: 5000;
    --z-modal: 5050;
    --z-system-top: 10000;

    /* ===== z-index：DataTable 内部层级 ===== */
    --z-cell: 90;
    --z-cell-fixed: 99;
    --z-sticky: 500;
    --z-thead: 501;
    --z-above-thead: 502;
    --z-drag: 99999;
    --z-overlay: 99999999;

    /* ===== 间距 — Tailwind 数字档 (新代码标准) =====
       为什么用数字而非 xs/sm/md：数字档 4px 增量更细，组件间距永远能精确到 4 倍数；
       同一界面用同一档 = 一致性默认结果。t-shirt 档 (xxs/xs/sm...) 仅老组件兼容，
       新增 / 重构必用数字档。 */
    --space-0: 0;
    --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;
    --space-16: 64px;
    --space-20: 80px;
    /* t-shirt 档：仅老组件兼容，新代码禁用 */
    --space-xxs: 5px;               /* 老 */
    --space-xs: 10px;               /* 老 */
    --space-sm: 15px;               /* 老 */
    --space-md: 20px;               /* 老 = var(--space-5) */
    --space-lg: 25px;               /* 老 */
    --space-xxl: 30px;              /* 老 */

    /* ===== 字体 ===== */
    /* 字体家族 — 全 app 统一字体栈;用字重无关的家族名(思源黑体优先,系统 CJK 兜底)
       不写 '思源黑体 CN Normal' 这类锁死字重的变体名,否则 font-weight(600/700)全部失效、粗体渲染成 Normal */
    --font-family-base: 'Source Han Sans SC', '思源黑体 CN', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 13px;           /* 辅助文字 */
    --font-size-base: 14px;         /* 正文默认 */
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;

    /* 字重 — 中文场景标题 600 即足够,1000 过粗;正文 400,标题 500/600,强调 700 */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 行高 — 中文比英文紧 (英文常用 1.5/1.625, 中文 1.5 已够松) */
    --line-height-tight: 1.25;      /* 标题、按钮、紧凑场景 */
    --line-height-normal: 1.5;      /* 正文默认 */
    --line-height-relaxed: 1.75;    /* 长段落、说明文字 */

    /* 字距 letter-spacing — 大字收紧才精致(Linear/Claude 标题签名)；正文/中文小字保持 0
       中文对负字距比英文敏感，只在 ≥16px 标题/数字上用 */
    --tracking-tight: -0.02em;      /* ≥20px 大标题 / 大数字 */
    --tracking-snug: -0.01em;       /* 16-18px 中标题 */
    --tracking-normal: 0;           /* 正文 / 中文小字 */

    /* ===== 圆角 ===== */
    --radius-xs: 2px;               /* 旧组件 */
    --radius-sm: 4px;               /* 按钮、输入框 */
    --radius-md: 6px;               /* 卡片 */
    --radius-lg: 8px;               /* 弹窗 */
    --radius-xl: 12px;              /* 大卡片 */
    --radius-2xl: 14px;             /* 大弹窗（对标 SaaS modal 圆角） */
    --radius-full: 9999px;          /* 药丸形标签 */

    /* ===== 动效 ===== */
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.35s;
    --ease-default: ease;
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* 快进慢出弹性感（Linear/Claude 动效签名），用于 hover/进场 */

    /* ===== 控件尺寸 ===== */
    --control-height-sm: 24px;
    --control-height-md: 28px;      /* 按钮/输入框标准高度 */
    --control-height-lg: 36px;
    --control-height-form: 34px;    /* 表单卡片(ry-form-card)内输入框/下拉/分段控件，比紧凑工具栏舒展 */

    /* ===== 过渡兼容：--dt-* → 全局名（计划 v2.2 移除）===== */
    --dt-z-cell: var(--z-cell);
    --dt-z-cell-fixed: var(--z-cell-fixed);
    --dt-z-sticky: var(--z-sticky);
    --dt-z-thead: var(--z-thead);
    --dt-z-above-thead: var(--z-above-thead);
    --dt-z-drag: var(--z-drag);
    --dt-z-overlay: var(--z-overlay);
    --dt-shadow-dropdown: var(--shadow-dropdown);
    --dt-shadow-panel: var(--shadow-panel);
    --dt-shadow-menu: var(--shadow-menu);
    --dt-shadow-modal: var(--shadow-modal);
}