/* ═══════════════════════════════════════════════════════════════
   AEROMAC ERP · Design Tokens
   ── 一套规范 · 两套色值表 ──
   本文件是颜色与尺度的【单一真相源】。
   规范文档 (06_AEROMAC_ERP界面设计规范_v5.0.html) 与完整界面 (erp.html)
   使用完全相同的变量名，因此切换主题只需切换 <html data-theme>。

   设计 DNA：借 SAP 的骨架（光照层级），用 AEROMAC 的脸（品牌色）
   ──────────────────────────────────────────────────────────────
   色值表 A · 深色（默认）  15 值
   色值表 B · 浅色          15 值（其中 4 个与深色共用同一 HEX）
   ──────────────────────────────────────────────────────────────
   两套表的明暗关系是【同一套逻辑翻转】：
     深色 = 卡片比背景亮一档
     浅色 = 卡片比背景白一档
   所以切换主题时结构完全不动，只有颜色变量被替换。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ═══ 色值表 A · 深色（默认） ═══════════════════════════════
     骨架 8 色直接取自 SAP sap_horizon_dark 官方主题包，未改值。
     它们不是「颜色」，是「光照」——决定界面有没有质感。
     ═══════════════════════════════════════════════════════════ */
  --bg:#12171C;      /* 内容底（最暗）      */
  --base:#1D232A;    /* 卡面 / 侧栏，亮一档 */
  --line:#2E3742;    /* 分隔线              */
  --hover:#283340;   /* 悬停，再亮一档      */

  --t1:#F5F6F7;      /* 主文本 14.64:1 */
  --t2:#D5DADD;      /* 次文本 10.42:1 */
  --t3:#A9B4BE;      /* 辅助文本 6.26:1 */

  /* 品牌 · AEROMAC logo 青蓝 H199° */
  --brand:#0091D5;   /* 原色   → 图标/图表/大数字（4.53:1）*/
  --brand-s:#0078B4; /* 加深档 → 按钮底（白字 4.83:1）     */
  --hi:#4DB4E5;      /* 提亮档 → 聚焦/链接/选中（6.77:1）  */
  --shell:#08293C;   /* 顶栏：logo 深海蓝原色混黑 72% */

  /* 语义 · 深色下【原值即可直接做文字】
     实测 5.26–7.21:1 —— 这是深色独有的优势：
     浅色主题必须把语义色加深才达标，深色不需要。*/
  --pos:#67AC84;     /* 正向 5.26:1 */
  --warn:#ED9D57;    /* 警示 6.30:1 */
  --neg:#F06A6A;     /* 负向 7.21:1 */

  --white:#FFFFFF;

  /* ═══ 顶栏专用前景色 ·【不随主题翻转】═══════════════════════
     顶栏在两套主题下都是深海蓝底（--shell 恒为深色），
     所以它的文字必须永远是浅色。若沿用会翻转的 --t2/--t3/--hi：
       浅色主题下的次文本色落在深蓝上仅 2.21:1（几乎不可见）
       浅色主题下的强调色落在深蓝上仅 2.17:1（几乎不可见）
     这三个值沿用深色表已有的 HEX，故不新增色值。
     顶栏内的文字一律用 --shell-*，禁止用 --t* / --hi。      */
  --shell-fg:#F5F6F7;      /* 顶栏主文字  深 13.93:1 / 浅 11.23:1 */
  --shell-fg-2:#A9B4BE;    /* 顶栏次文字  深  7.15:1 / 浅  5.77:1 */
  --shell-hi:#4DB4E5;      /* 顶栏强调    深  6.44:1 / 浅  5.20:1 */

  /* ═══ 随主题翻转的 alpha 层（非色值，故不占 16 色额度）═══
     写死 RGB 的半透明是最容易在换主题时翻车的地方：
     深色里 rgba(18,23,28,.4) 是「比卡面更暗」，
     到了浅色就变成一块脏灰。所以一律走变量。            */
  --thead-bg:rgba(18,23,28,.40);      /* 表头底：比卡面再暗一层 */
  --sunken:rgba(18,23,28,.72);        /* 下沉遮罩               */
  --tint:rgba(77,180,229,.14);        /* 品牌淡底（选中/标签）  */
  --hairline:rgba(169,180,190,.16);   /* 次级发丝线             */

  /* ═══ 尺度：两套主题完全共用，不随主题变 ═══ */
  --r-s:4px;  --r:8px;  --r-l:12px;          /* 圆角三档 */
  --shell-h:56px;                             /* 顶栏 */
  --side-w:220px;                             /* 侧栏 */
  --pad:32px;                                 /* 内容区内边距 */
  --th:44px;                                  /* 表头行高 */
  --tr:48px;                                  /* 数据行高 */
  --f:MiSans,"72","72full",Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --fm:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --ease:.2s ease;                            /* 动效统一 200ms */
}

/* ═══════════════════════════════════════════════════════════════
   色值表 B · 浅色
   ── 反相派生，但【不是无脑反相】──
   三项与深色结论相反，必须单独取值：
     1. --hi   深色取提亮档 → 浅色取加深档
        因为深底要亮才看得见，浅底要深才看得见。
     2. --warn 深色原值可直接做文字(6.30:1)
        浅色必须换成深版，原值在白底只有 3.03:1。
     3. --t3   深色原值达标；浅色需更深才达 4.5:1。
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"]{
  --bg:#F4F6F8;      /* 内容底（微微偏灰的冷白） */
  --base:#FFFFFF;    /* 卡面：纯白，比底色白一档 */
  --line:#E1E6EA;    /* 分隔线 */
  --hover:#EEF2F5;   /* 悬停 */

  --t1:#1D2D3E;      /* 主文本 14.03:1 */
  --t2:#556B82;      /* 次文本  5.51:1 */
  --t3:#5C6C7E;      /* 辅助文本 5.38:1（必须比深色更深才达标）*/

  /* 品牌三档：原色与加深档【复用深色的 HEX】，只有 --hi 换方向 */
  --brand:#0091D5;   /* 同上：图标/图表/大数字 */
  --brand-s:#0078B4; /* 同上：按钮底 */
  --hi:#0A6EA0;      /* 反向：由「提亮」改为「加深」5.17:1 */
  --shell:#0B3954;   /* 顶栏：logo 深海蓝原色（白字 12.16:1）*/

  /* 语义 · 浅色下取【加深版】做文字，全部实测达标 */
  --pos:#107E3E;     /* 正向 5.15:1 */
  --warn:#A25A1D;    /* 警示 5.23:1（原值仅 3.03:1，禁用）*/
  --neg:#BB0000;     /* 负向 6.75:1 */

  --white:#FFFFFF;

  --thead-bg:rgba(244,246,248,.70);
  --sunken:rgba(29,45,62,.40);
  --tint:rgba(10,110,160,.10);
  --hairline:rgba(92,108,126,.14);
}