/* ============================================================================
   设计系统 V3 配色「云砚蓝」（方案 A）
   Token 层 · 纯变量，可直接引入
   ----------------------------------------------------------------------------
   用法：放到 static/ 下，在 index.html / mobile.html 的 <style> 之后引入
        <link rel="stylesheet" href="/design-tokens-v3-blue.css?v=1">
   注意 static_url_path="" —— 静态文件在根路径，不带 /static/ 前缀。

   ── 本文件只放变量，不放任何选择器规则 ──
   这不是洁癖，是踩过的坑：本文件曾带有 `body{font-family:...}` 与
   `--font-app` 的别名，结果把移动端的字体栈从 "Segoe UI Variable Display"
   换成了 "Segoe UI"。两者度量宽度不同，mobile_scan_gun.html 的 nowrap 行
   因此被挤出 90px 横向滚动。变量文件一旦带规则，就会以「全局覆盖」的方式
   影响它本不该碰的东西。所以：变量归本文件，规则归 design-v3-ui.css。

   原页面的 :root 全部保留未删，本文件在其之后加载，因此同名变量以本文件为准；
   而本文件没定义的变量（如 --font / --mono / --font-app）继续由原 :root 提供。
   ============================================================================ */

:root{
  /* ---------------------------------------------------------------
     1. 主色 · 云砚蓝
     与 OZON 官方蓝 #005BFF 同色域（色相 219 到 224），饱和度降约 15%，
     使工作台在任务栏与 OZON 后台、店小秘并排时仍可一眼区分。
     对比度实测：p-500 上白字 4.61:1，p-600 上白字 6.68:1，均过 AA。
     --------------------------------------------------------------- */
  --p-50:#f0f5ff;
  --p-100:#deeaff;
  --p-200:#c2d8fe;
  --p-300:#93bbfc;
  --p-400:#5f95f8;
  --p-500:#2e6fe8;   /* 界面主色 */
  --p-600:#1c55c4;   /* 主色上的文字色 / 渐变终点 */
  --p-700:#16459e;
  --p-800:#123a80;

  /* ---------------------------------------------------------------
     2. 辅助色 · 语义专用，不抢主色
     cy = 系统同步 / 只读 / 自动流程
     in = AI 能力模块标识
     --------------------------------------------------------------- */
  --cy-50:#edf9fb;
  --cy-100:#d9f1f6;
  --cy-300:#7fc4d1;
  --cy-500:#0b7d96;   /* 对比度 4.54:1 AA */
  --cy-600:#096579;
  --cy-700:#07505f;

  --in-50:#f1f0fb;
  --in-100:#dcdaf6;
  --in-300:#a9a5e0;
  --in-500:#4b45c6;   /* 对比度 6.71:1 AA */
  --in-600:#3a34a8;
  --in-700:#2d2885;

  /* ---------------------------------------------------------------
     3. 中性色 · 冷调石板灰（10 级）
     全部带同一份蓝底调，与主色同源。
     对比度（对 #f7f9fc）：900 = 15.9:1  700 = 9.4:1  600 = 7.1:1
                            500 = 4.67:1（AA 下限）  400 = 2.35:1（不合格）
     --------------------------------------------------------------- */
  --n-50:#f7f9fc;    /* 页面底 */
  --n-100:#edf1f7;
  --n-200:#dce3ed;
  --n-300:#c3cddb;   /* 仅禁用态与装饰线 */
  --n-400:#9aa8bc;   /* 实测仅 2.3 到 2.4:1，连大字号 3:1 都不到。
                        只允许做装饰线与非文字填充，禁止承载任何文字。 */
  --n-500:#63718a;   /* 辅助文字与占位符的最小合规值 */
  --n-600:#4e5c72;
  --n-700:#3d4a5e;
  --n-800:#2a3547;
  --n-900:#1b2433;   /* 主文字 */

  /* ---------------------------------------------------------------
     4. 功能色 · 三套配色共用，保证换肤时业务语义不变
     口径：盈利为绿、亏损为红（沿用现网损益口径）
     若日后接入行情涨跌，请另建 --quote-* 变量走涨红跌绿，切勿复用这两个
     --------------------------------------------------------------- */
  --ok:#0a7543;          --ok-bg:#e6f6ee;      --ok-line:rgba(10,117,67,.20);
  --warn:#9a6200;        --warn-bg:#fff5e3;    --warn-line:rgba(154,98,0,.20);
  --warn-vivid:#e8a317;  /* 仅状态点与填充块，不承载文字 */
  --danger:#c7362b;      --danger-bg:#fdecea;  --danger-line:rgba(199,54,43,.20);
  /* 涨跌色（2026-09-15 立，供「趋势分析」用）：中国口径 —— 涨红跌绿。
     与上面的盈亏色语义不同：--up/--down 是「盈利/亏损」（绿=赚），
     不能拿来表示商品趋势，否则同一屏里「上升」和「盈利」会串色。 */
  --quote-up:#c7362b;    --quote-up-bg:rgba(199,54,43,.10);
  --quote-down:#0a7543;  --quote-down-bg:rgba(10,117,67,.10);
  --info:var(--p-500);   --info-bg:var(--p-50);

  /* ---------------------------------------------------------------
     5. 玻璃层 · 冷调
     光源统一在左上。--glass-blur 比暖色方案深一档（20 → 24px），
     冷画布上玻璃更容易显脏，加深模糊可提升通透感。
     --------------------------------------------------------------- */
  --glass-1:rgba(255,255,255,.70);        /* 常规卡片 */
  --glass-2:rgba(255,255,255,.90);        /* 弹窗、抽屉 */
  --glass-nav:rgba(255,255,255,.80);      /* 侧栏、顶栏 */
  --glass-hair:rgba(255,255,255,.85);     /* 1px 外描边 */
  --glass-line:rgba(46,111,232,.10);      /* 内部分隔线 */
  --glass-blur:blur(24px) saturate(1.30);
  --glass-blur-deep:blur(28px) saturate(1.35);
  --hi-inset:inset 0 1px 0 rgba(255,255,255,.94);  /* 玻璃签名亮线 */

  /* ---------------------------------------------------------------
     6. 阴影 · 冷蓝着色
     投影色必须跟着主色走，用暖棕投影配冷蓝界面会显脏。
     --------------------------------------------------------------- */
  --sh-1:0 1px 2px rgba(20,40,80,.05),0 2px 6px rgba(20,40,80,.06);
  --sh-2:0 2px 6px rgba(20,40,80,.06),0 10px 26px rgba(20,40,80,.08);
  --sh-3:0 4px 12px rgba(20,40,80,.08),0 18px 44px rgba(20,40,80,.12);
  --sh-4:0 24px 70px rgba(12,28,60,.26);
  --sh-brand:0 5px 16px rgba(46,111,232,.32);
  --sh-brand-hover:0 7px 20px rgba(46,111,232,.40);
  --sh-danger:0 4px 12px rgba(199,54,43,.28);
  --sh-sync:0 5px 16px rgba(11,125,150,.28);
  --sh-ai:0 5px 16px rgba(75,69,198,.28);

  /* ---------------------------------------------------------------
     7. 圆角 · 六级 + 胶囊
     规则：容器越外层，圆角越大；嵌套时内层 = 外层 - 内边距
     --------------------------------------------------------------- */
  --r-xs:6px;      /* 徽标、标签 */
  --r-sm:8px;      /* 输入框、缩略图、小按钮 */
  --r-md:10px;     /* 按钮 */
  --r-lg:14px;     /* 内层块、标签页 */
  --r-xl:18px;     /* 卡片、KPI */
  --r-2xl:26px;    /* 弹窗、抽屉 */
  --r-pill:999px;  /* 胶囊、头像 */

  /* ---------------------------------------------------------------
     8. 间距 · 8pt 基准
     --------------------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---------------------------------------------------------------
     9. 字体 · 只声明新字族，不改现网的 --font / --mono / --font-app
     --------------------------------------------------------------- */
  --font-display:"Segoe UI Variable Display","Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  --font-sans:"Segoe UI Variable Display","Segoe UI","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  --font-mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --fw-500:500; --fw-600:600; --fw-700:700; --fw-750:750; --fw-800:800;

  /* ---------------------------------------------------------------
     10. 动效
     --spd 是全局速度倍率，1 = 正常，0 = 关闭全部动效。
     所有时长都必须写成 calc(XXms * var(--spd))，否则全局倍率失效。
     --------------------------------------------------------------- */
  --spd:1;

  --d-0:calc(90ms  * var(--spd));   /* 瞬时反馈：按下、勾选、行高亮 */
  --d-1:calc(140ms * var(--spd));   /* 悬停、聚焦、颜色变化 */
  --d-2:calc(200ms * var(--spd));   /* 交互标准：抬起、卡片悬停、下拉、Toast */
  --d-3:calc(320ms * var(--spd));   /* 区块入场、抽屉、弹窗、页面切换 */
  --d-4:calc(560ms * var(--spd));   /* 一次性强调：登录页、首屏 */

  --ease-out:cubic-bezier(.22,1,.36,1);        /* 默认，进入与出场 */
  --ease-expo:cubic-bezier(.16,1,.3,1);        /* 弹窗、强调，尾巴更长 */
  --ease-inout:cubic-bezier(.4,0,.2,1);        /* 对称位移 */
  --ease-snap:cubic-bezier(.2,.9,.3,1);        /* 页面切入，起步快 */
  --ease-back:cubic-bezier(.34,1.56,.64,1);    /* 轻微过冲，仅用于按钮回弹与小徽标 */

  --stagger-step:calc(32ms * var(--spd));
  --stagger-max:8;

  /* ---------------------------------------------------------------
     11. z 轴分层（禁止再出现 9999 之类魔法数字）
     --------------------------------------------------------------- */
  --z-base:1;     /* 噪点层 */
  --z-canvas:2;   /* 应用主体 */
  --z-sticky:5;   /* 侧栏、顶栏、吸顶表头 */
  --z-drop:20;    /* 下拉面板、日期选择器 */
  --z-toast:60;   /* 消息提示，需盖住弹窗 */
  --z-modal:100;  /* 弹窗遮罩 */
  --z-confirm:160;/* 页内二次确认，需高于弹窗 */
  --z-crop:200;   /* 裁剪与多边形框选，最高层 */

  /* ===============================================================
     12. 兼容别名
     这些别名不只是「迁移用」，它们同时修掉了现网 17 处「引用了从未定义过的
     变量」的静默失效（--ease-out / --ink-400 / --ink-600 / --ink-800 /
     --bg-soft / --bd-soft / --line-200 / --red / --green / --border /
     --border-soft / --surface / --surface-2 / --text / --dim / --faint /
     --primary）。这些属性此前会回退到继承值或 currentColor，
     定义之后它们第一次按原意渲染。请知悉：这些元素的观感会因此发生改变。
     =============================================================== */
  --accent-400:var(--p-400);
  --accent-500:var(--p-500);
  --accent-600:var(--p-600);
  --accent-700:var(--p-700);
  --brand-400:var(--p-400);
  --brand-500:var(--p-500);
  --brand-600:var(--p-600);
  --brand-700:var(--p-700);
  --brand-800:var(--p-800);

  --ink-50:var(--n-50);
  --ink-100:var(--n-100);
  --ink-200:var(--n-200);
  --ink-300:var(--n-300);
  --ink-400:var(--n-400);
  --ink-500:var(--n-500);
  --ink-600:var(--n-600);
  --ink-700:var(--n-700);
  --ink-800:var(--n-800);
  --ink-900:var(--n-900);

  --sync-50:var(--cy-50);
  --sync-100:var(--cy-100);
  --sync-500:var(--cy-500);
  --sync-600:var(--cy-600);
  --sync-700:var(--cy-700);

  --up:var(--ok);
  --down:var(--danger);
  --paper:var(--n-50);
  --glass:var(--glass-1);
  --glass-strong:var(--glass-nav);
  --glass-border:var(--glass-hair);

  --shadow-sm:var(--sh-1);
  --shadow-md:var(--sh-2);
  --shadow-lg:var(--sh-3);
  --shadow-brand:var(--sh-brand);

  --ease:var(--ease-out);

  --space-page:24px;
  --space-xl:20px;
  --space-lg:16px;
  --space-md:12px;
  --space-sm:8px;
  --space-xs:4px;

  /* --- 以下 12 个是现网引用了但从未定义的变量，用于修掉静默失效 --- */
  --bg-soft:var(--n-100);        /* 浅底：只读输入框、缩略图占位 */
  --bd-soft:var(--n-200);        /* 浅描边 */
  --line-200:var(--n-200);       /* 分隔线 */
  --border:var(--n-200);         /* 边框（季节性选品区块） */
  --border-soft:var(--n-200);
  --surface:rgba(255,255,255,.86);
  --surface-2:var(--n-100);
  --text:var(--n-900);
  --dim:var(--n-500);
  --faint:var(--n-500);
  --primary:var(--p-500);        /* 选品分析里表示"当前月"的主色 */
  --red:var(--danger);
  --green:var(--ok);
  --up-bg:var(--ok-bg);
  --down-bg:var(--danger-bg);

  /* ---------------------------------------------------------------
     13. 弹窗尺寸规范（2026-09-12 立）
     表单 / 明细类弹窗统一宽度。新增上品的尺码变体行有 9 列
     （图 / 颜色 / 尺码 / 数量 / 采购价 / 克重 / 卖价 / ↑价 / 删除），
     560px 时三个价格输入框只剩 40 余 px，无法辨认录入。故定 960px 为标准，
     所有宽弹窗（.modal-wide / .modal-beatra / .rcv-ord-modal）一律引用此变量，
     日后调宽只改本文件一处，全站生效。
     --------------------------------------------------------------- */
  --modal-w-form:960px;     /* 表单 / 明细类弹窗标准宽度 */
  --modal-w-narrow:560px;   /* 轻量确认类弹窗（.modal 默认） */

  /* ---------------------------------------------------------------
     14. 图表专用（2026-09-14 立）
     所有 .dash 区块内的图表颜色只允许引用本组变量，禁止再出现
     #hex / rgba() 字面量。护栏：_工具/_check_chart_tokens.py。
     注意：写 SVG 时不能把 var() 塞进 presentation attribute
     （fill="var(--x)" 在 Chrome 不解析、回退黑色），必须走类名 + CSS。
     --------------------------------------------------------------- */
  --chart-grid:rgba(46,111,232,.09);      /* 水平网格线 */
  --chart-base:var(--n-300);              /* X 轴基线（比网格实一档） */
  --chart-axis:var(--n-500);              /* 刻度与轴文字 */
  --chart-track:rgba(46,111,232,.08);     /* 条形轨道底色（统一三处用法） */
  --chart-track-2:rgba(46,111,232,.16);   /* 轨道内 25% 刻度线 */
  --chart-c1:var(--cy-500);               /* 系列① 单量 */
  --chart-c1-soft:var(--cy-300);          /* 系列① 渐变浅端 */
  --chart-c2:var(--p-500);                /* 系列② 金额 */
  --chart-c2-soft:var(--p-300);           /* 系列② 渐变浅端 */
  --chart-c3:var(--ok);                   /* 可用 / 健康 */
  --chart-c4:var(--warn);                 /* 占用 / 待处理 */
  --chart-c5:var(--in-500);               /* AI / 辅助维度 */
  --chart-tip-bg:rgba(27,36,51,.94);      /* 图表 tooltip 底 */
  --chart-h:268px;                        /* 趋势主图高度基准 */
  --chart-tint-c1:rgba(11,125,150,.12);   /* KPI 卡光晕 · 单量（cy） */
  --chart-tint-c2:rgba(46,111,232,.16);   /* KPI 卡光晕 · 金额（p） */
  --chart-tint-c3:rgba(10,117,67,.12);    /* KPI 卡光晕 · 健康（ok） */
  --chart-tint-c4:rgba(232,163,23,.15);   /* KPI 卡光晕 · 待处理（warn） */
  --chart-tint-c5:rgba(75,69,198,.13);    /* KPI 卡光晕 · 余额/AI（in） */
  --chart-tint-c6:rgba(199,54,43,.10);    /* KPI 卡光晕 · 异常（danger） */
}