/* ============================================================
   仓掌柜 · 统一设计令牌（Design Tokens）v5.0
   ------------------------------------------------------------
   作用：全站唯一的颜色 / 圆角 / 阴影 / 间距 / 字号权威来源。
   - :root                默认（浅色主题）
   - [data-theme="dark"]  深色主题（body 切换 data-theme 即生效）
   原则：
   1. 中性色为底，主色（石青 teal）只做关键点缀，不铺满界面；
   2. 语义色专用：成功=绿 / 警告=琥珀 / 危险=红 / 信息=蓝；
   3. 模块色低饱和、小面积，仅用于图标与小标签；
   4. 所有组件只允许引用本文件变量，禁止再写死十六进制色值。
   本文件必须在所有样式表之前加载（tokens → 其他CSS → theme）。
   ============================================================ */

:root{
  /* ---------- 品牌主色 Primary（石青/Teal，克制使用） ---------- */
  --color-primary:#0D9488;            /* 主色：主要按钮、导航激活、品牌标识、关键数据 */
  --color-primary-hover:#0F766E;      /* 主色悬停（加深一档） */
  --color-primary-active:#115E59;     /* 主色按下（最深一档） */
  --color-primary-bg:rgba(13,148,136,.10);   /* 主色浅底：选中行、浅色标签底 */
  --color-primary-bg-strong:rgba(13,148,136,.18); /* 主色浅底（较强）：悬停浅底 */
  --color-primary-text:#FFFFFF;       /* 铺在主色上的文字/图标色 */

  /* ---------- 辅助色 Secondary（青蓝 Cyan，与主色同色系不抢戏） ---------- */
  --color-secondary:#0891B2;          /* 辅助色：次要按钮、辅助标签 */
  --color-secondary-hover:#0E7490;
  --color-secondary-bg:rgba(8,145,178,.10);
  --color-secondary-text:#FFFFFF;

  /* ---------- 中性色 Neutral（Slate 灰阶，界面主体） ---------- */
  --color-bg:#F4F6F9;                 /* 页面整体背景 */
  --color-surface:#FFFFFF;            /* 卡片/面板/弹层表面 */
  --color-surface-hover:#F1F5F9;      /* 表面悬停 / 表头底 */
  --color-surface-3:#E9EEF4;          /* 更深一档的中性表面（分段控件底等） */
  --color-border:#E2E8F0;             /* 常规边框/分割线 */
  --color-border-light:#EEF2F7;       /* 更轻的分割线 */
  --color-text-primary:#0F172A;       /* 一级文字（标题、正文） */
  --color-text-secondary:#475569;     /* 二级文字（说明、辅助信息） */
  --color-text-muted:#94A3B8;         /* 弱化文字（占位、时间戳） */
  --color-text-disabled:#CBD5E1;      /* 禁用文字 */
  --color-mask:rgba(15,23,42,.45);    /* 遮罩层 */
  --color-inverse:#FFFFFF;            /* 深色底上的反白文字 */

  /* ---------- 系统语义色 Semantic（只用于对应语义，禁止装饰滥用） ---------- */
  --color-success:#10B981;            /* 成功/入库/正常/在线 */
  --color-success-hover:#059669;
  --color-success-bg:rgba(16,185,129,.12);
  --color-success-text:#047857;       /* 浅底上的成功文字 */
  --color-warning:#F59E0B;            /* 警告/待检/待处理 */
  --color-warning-hover:#D97706;
  --color-warning-bg:rgba(245,158,11,.13);
  --color-warning-text:#B45309;
  --color-danger:#EF4444;             /* 危险/删除/缺货/离线/错误 */
  --color-danger-hover:#DC2626;
  --color-danger-bg:rgba(239,68,68,.12);
  --color-danger-text:#B91C1C;
  --color-info:#3B82F6;               /* 信息/提示 */
  --color-info-hover:#2563EB;
  --color-info-bg:rgba(59,130,246,.12);
  --color-info-text:#1D4ED8;

  /* ---------- 选中 / 高亮 / 焦点 Selection（全站唯一，禁止各模块自定义） ---------- */
  --color-selected:rgba(13,148,136,.10);          /* 行选中/标签选中底色（主色透明变体） */
  --color-selected-strong:rgba(13,148,136,.16);   /* 选中悬停叠加 */
  --color-selected-border:rgba(13,148,136,.40);   /* 选中描边/左侧指示条 */
  --color-highlight:rgba(13,148,136,.18);         /* 搜索命中高亮 */
  --color-focus-ring:rgba(13,148,136,.28);        /* 键盘焦点环（配合 box-shadow 使用） */

  /* ---------- 业务模块归属色 Module（低饱和、小面积） ---------- */
  --mod-products:#0EA5E9;  /* 商品管理 · 天青 */
  --mod-arrivals:#F97316;  /* 到货管理 · 暖橙 */
  --mod-zones:#8B5CF6;     /* 区域管理 · 堇紫 */
  --mod-flow:#06B6D4;      /* 库存流水 · 青碧 */
  --mod-checks:#10B981;    /* 库存盘点 · 青绿 */
  --mod-tasks:#F59E0B;     /* 任务待办 · 琥珀 */
  --mod-chat:#3B82F6;      /* 消息 · 霁蓝 */
  --mod-meetings:#EC4899;  /* 会议 · 桃粉 */
  /* 模块色浅底（小标签底，统一 12% 透明度） */
  --mod-products-bg:rgba(14,165,233,.12);
  --mod-arrivals-bg:rgba(249,115,22,.12);
  --mod-zones-bg:rgba(139,92,246,.12);
  --mod-flow-bg:rgba(6,182,212,.12);
  --mod-checks-bg:rgba(16,185,129,.12);
  --mod-tasks-bg:rgba(245,158,11,.12);
  --mod-chat-bg:rgba(59,130,246,.12);
  --mod-meetings-bg:rgba(236,72,153,.12);

  /* ---------- 圆角 Radius ---------- */
  --radius-sm:6px;       /* 标签、小控件 */
  --radius-md:10px;      /* 按钮、输入框、小卡片 */
  --radius-lg:14px;      /* 卡片、面板、弹层 */
  --radius-full:999px;   /* 胶囊、头像 */

  /* ---------- 阴影 Shadow（中性冷灰，不染色） ---------- */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 2px 8px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.14),0 4px 10px rgba(15,23,42,.06);

  /* ---------- 间距 Spacing（4 的倍数节奏） ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  /* ---------- 字号 Font Size ---------- */
  --font-size-sm:13px;
  --font-size-base:14px;
  --font-size-lg:16px;

  /* ---------- 布局专属表面（侧栏 / 顶栏） ---------- */
  --sidebar-bg:var(--color-surface);
  --sidebar-text:var(--color-text-secondary);
  --sidebar-text-active:var(--color-primary);
  --topbar-bg:var(--color-surface);

  color-scheme:light;
}

/* ============================================================
   深色主题：body[data-theme="dark"] 时自动切换
   （变量名与浅色完全一致，组件无需另写深色规则）
   ============================================================ */
[data-theme="dark"]{
  /* 主色：深色背景下提亮一档保证对比度 */
  --color-primary:#2DD4BF;
  --color-primary-hover:#5EEAD4;
  --color-primary-active:#14B8A6;
  --color-primary-bg:rgba(45,212,191,.14);
  --color-primary-bg-strong:rgba(45,212,191,.22);
  --color-primary-text:#06231F;

  /* 辅助色 */
  --color-secondary:#22D3EE;
  --color-secondary-hover:#67E8F9;
  --color-secondary-bg:rgba(34,211,238,.13);
  --color-secondary-text:#052B33;

  /* 中性色（深蓝灰底，不用纯黑） */
  --color-bg:#0C1118;
  --color-surface:#131A24;
  --color-surface-hover:#1C2534;
  --color-surface-3:#232E3D;
  --color-border:#26303F;
  --color-border-light:#1D2632;
  --color-text-primary:#E8EDF4;
  --color-text-secondary:#AAB6C7;
  --color-text-muted:#6B7689;
  --color-text-disabled:#3A4555;
  --color-mask:rgba(0,0,0,.6);
  --color-inverse:#0C1118;

  /* 语义色（深色下整体提亮） */
  --color-success:#34D399;
  --color-success-hover:#6EE7B7;
  --color-success-bg:rgba(52,211,153,.15);
  --color-success-text:#6EE7B7;
  --color-warning:#FBBF24;
  --color-warning-hover:#FCD34D;
  --color-warning-bg:rgba(251,191,36,.14);
  --color-warning-text:#FCD34D;
  --color-danger:#F87171;
  --color-danger-hover:#FCA5A5;
  --color-danger-bg:rgba(248,113,113,.14);
  --color-danger-text:#FCA5A5;
  --color-info:#60A5FA;
  --color-info-hover:#93C5FD;
  --color-info-bg:rgba(96,165,250,.15);
  --color-info-text:#93C5FD;

  /* 选中/高亮/焦点 */
  --color-selected:rgba(45,212,191,.14);
  --color-selected-strong:rgba(45,212,191,.22);
  --color-selected-border:rgba(45,212,191,.45);
  --color-highlight:rgba(45,212,191,.24);
  --color-focus-ring:rgba(45,212,191,.32);

  /* 模块色（深色下提亮到 400 档） */
  --mod-products:#38BDF8;
  --mod-arrivals:#FB923C;
  --mod-zones:#A78BFA;
  --mod-flow:#22D3EE;
  --mod-checks:#34D399;
  --mod-tasks:#FBBF24;
  --mod-chat:#60A5FA;
  --mod-meetings:#F472B6;
  --mod-products-bg:rgba(56,189,248,.16);
  --mod-arrivals-bg:rgba(251,146,60,.16);
  --mod-zones-bg:rgba(167,139,250,.16);
  --mod-flow-bg:rgba(34,211,238,.16);
  --mod-checks-bg:rgba(52,211,153,.16);
  --mod-tasks-bg:rgba(251,191,36,.16);
  --mod-chat-bg:rgba(96,165,250,.16);
  --mod-meetings-bg:rgba(244,114,182,.16);

  /* 阴影（深色下更深） */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.4);

  --sidebar-bg:#131A24;
  --sidebar-text:#AAB6C7;
  --sidebar-text-active:#5EEAD4;
  --topbar-bg:#131A24;

  color-scheme:dark;
}