/* ============================================================================
   设计令牌（三层：原始值 → 语义层 → 组件层）
   ----------------------------------------------------------------------------
   这是全站唯一的色值定义处。第一阶段体检报告、Excel 状态色与网页三处共用同一套
   色值，改色只需改本文件与 tools/theme.py（两者由 tests/test_tokens_contrast.py
   校验一致性，只改一边会被测试拦住）。

   视觉定位：白纸 + 青绿。用浅底与留白换取通透感，而不是把颜色调亮——
   主色取能承载白字的深青绿，亮青绿只作装饰性高亮。

   色相规则（用户明确要求）：
     * 青绿是唯一主色，用于交互强调：主按钮、聚焦环、选中行、当前导航、分页当前页。
     * 语义三色（苔绿/琥珀橙/警示红）必须与主色拉开，避免严重度失真。
     * 蓝色严格限域（唯一「蓝用途」）：超链接与可点击文本、信息类提示、
       「参考」级标签。其余任何位置不出现蓝色，尤其禁止荧光天蓝 / 靛蓝
       （#38BDF8 / #0EA5E9 / #6366F1 一族，测试强制）。
   ========================================================================= */

:root {
  /* ======================== 第一层：原始值 ======================== */

  /* 中性色阶：低号 = 浅面，高号 = 深字（浅色主题下与旧「暖近黑」语义相反） */
  --c-neutral-000: #FFFFFF;   /* 卡片 / 弹窗 */
  --c-neutral-050: #F7FAF9;   /* 页面底（极浅冷灰青） */
  --c-neutral-100: #EFF4F3;   /* 表头 / 输入框内凹面 */
  --c-neutral-150: #E6EDEC;   /* hover 面 */
  --c-neutral-200: #E3E9E8;   /* 常规描边 */
  --c-neutral-300: #CFD8D7;   /* 强描边 */
  --c-neutral-400: #A8B4B2;   /* 滚动条 / 排序箭头 */
  --c-neutral-500: #8A9795;   /* 失效文字（WCAG 对失效控件豁免） */
  --c-neutral-600: #5A6966;   /* 弱化文字（对页面底 5.5:1，留有余量） */
  --c-neutral-700: #3F4B49;   /* 次要文字 */
  --c-neutral-900: #10201D;   /* 正文 */

  /* 青绿（唯一主色家族） */
  --c-teal-300: #4FD8C4;      /* 装饰档：图表与小面积高亮，不做大面积底色 */
  --c-teal-500: #0B7F6E;      /* 主色（配白字 4.85:1） */
  --c-teal-600: #09695B;      /* hover */
  --c-teal-700: #075A4E;      /* active */

  /* 语义三色（文字级深档，浅底上 ≥4.5:1） */
  --c-moss-400:  #3F8A5F;
  --c-moss-500:  #2F6B4A;
  --c-moss-600:  #245538;

  --c-rust-400:  #B8761A;
  --c-rust-500:  #9A5A10;
  --c-rust-600:  #7A460C;

  --c-alarm-400: #C93A31;
  --c-alarm-500: #B3261E;
  --c-alarm-600: #8E1B15;

  /* 钢青蓝（唯一「蓝用途」：链接 / 信息提示 /「参考」级标签） */
  --c-steel-400: #3E7E9E;
  --c-steel-500: #2F6F8F;
  --c-steel-600: #255C77;

  /* 排版 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI",
              system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas,
               "Courier New", monospace;

  --fs-2xs: 12px;
  --fs-xs:  13px;
  --fs-sm:  14px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  22px;
  --fs-2xl: 30px;
  --fs-3xl: 36px;

  /* 表格字号（2026-10-08 跟单主管要求「数字型号清楚点、字体统一」）：
     表格整体（含型号列）统一 15px——型号列此前用 --fs-xs(13px) 比数据列还小。
     独立成令牌而非直接用 --fs-md：表格字号与行高（--layout-table-row-h=32）
     联动调优，改它只动这里。 */
  --tbl-fs: 15px;
  /* 表格字体族（2026-10-13 显示设置个性化）：2026-10-13 起全员默认黑体（用户要求
     「跟单员字体统一默认黑体，后续自己选」），个体在「显示设置」里的选择只覆写
     这一个令牌（app.js 注入），不波及 UI 文案与等宽数字列。 */
  --tbl-font: "SimHei", "Heiti SC", var(--font-sans);
  /* HTML 表格（抽屉/当天流水等 .drawer-table 系）字号：默认保持原 --fs-xs 观感，
     用户改字号时由 app.js 一并覆写，让全站数据表格同步放大。 */
  --tbl-fs-html: var(--fs-xs);

  --fw-medium: 500;
  --fw-bold:   600;

  --lh-base:  1.6;

  /* 间距（4px 基准，仓库工具偏紧凑） */
  --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;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* 浅色主题的阴影要极轻，靠 1px 描边分层而不是靠投影堆叠 */
  --shadow-md: 0 4px 14px -6px rgba(16, 32, 29, .12);
  --shadow-lg: 0 16px 40px -20px rgba(16, 32, 29, .22);

  --dur-base: 150ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* 布局尺寸 */
  --layout-topbar-h: 60px;
  --layout-statusbar-h: 38px;
  --layout-content-max: 1800px;
  /* 行高（2026-09-30 用户要求「像 Excel 一样一屏多看几行」）：40px → 32px。
     全站唯一来源，库存总表 / 出入库登记 / 导入导出三处的表格同时变紧凑。 */
  --layout-table-row-h: 32px;

  /* ======================== 第二层：语义层 ======================== */

  --bg-page:      var(--c-neutral-050);
  --bg-sidebar:   var(--c-neutral-000);
  --bg-card:      var(--c-neutral-000);
  --bg-elevated:  var(--c-neutral-000);
  --bg-inset:     var(--c-neutral-100);
  --bg-hover:     rgba(11, 127, 110, .06);

  --border:        var(--c-neutral-200);
  --border-strong: var(--c-neutral-300);
  --border-muted:  var(--c-neutral-150);

  --text-primary:   var(--c-neutral-900);
  --text-secondary: var(--c-neutral-700);
  --text-muted:     var(--c-neutral-600);
  --text-disabled:  var(--c-neutral-500);

  --accent:        var(--c-teal-500);
  --accent-hover:  var(--c-teal-600);
  --accent-active: var(--c-teal-700);
  --accent-weak:   rgba(11, 127, 110, .10);
  --accent-border: rgba(11, 127, 110, .38);
  --on-accent:     var(--c-neutral-000);

  --ok:        var(--c-moss-500);
  --ok-weak:   rgba(47, 107, 74, .10);
  --ok-border: rgba(47, 107, 74, .35);

  --warn:        var(--c-rust-500);
  --warn-weak:   rgba(154, 90, 16, .10);
  --warn-border: rgba(154, 90, 16, .35);

  --danger:        var(--c-alarm-500);
  --danger-weak:   rgba(179, 38, 30, .10);
  --danger-border: rgba(179, 38, 30, .35);

  --info:        var(--c-steel-500);
  --info-strong: var(--c-steel-600);
  --info-weak:   rgba(47, 111, 143, .10);
  --info-border: rgba(47, 111, 143, .35);

  /* 个人醒目标记弱底（仓管确认单黄色；与 tools/theme.py LIGHT 逐项一致，
     守门测试锁定）：实色近似 ~14% 琥珀黄，比弱化档(0.10)更显眼——标记是人工意图 */
  --mark-yellow-weak: #FAEDD4;

  --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);

  /* ======================== 第三层：组件层 ======================== */

  /* 按钮 */
  --btn-h: 36px;
  --btn-px: var(--sp-4);
  --btn-radius: var(--radius-sm);
  --btn-font-size: var(--fs-sm);
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-bg-active: var(--accent-active);
  --btn-primary-fg: var(--on-accent);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--bg-hover);
  --btn-ghost-border: var(--border);
  --btn-ghost-fg: var(--text-primary);
  --btn-danger-bg: var(--danger);
  --btn-danger-fg: var(--c-neutral-000);

  /* 输入 */
  --input-h: 38px;
  --input-bg: var(--bg-inset);
  --input-bg-focus: var(--c-neutral-000);
  --input-fg: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --input-border: var(--border);
  --input-border-focus: var(--accent-border);
  --input-radius: var(--radius-sm);

  /* 表格 */
  --tbl-bg: var(--bg-card);
  --tbl-header-bg: var(--c-neutral-100);
  --tbl-header-fg: var(--c-neutral-700);
  --tbl-row-bg: transparent;
  --tbl-row-alt-bg: rgba(16, 32, 29, .025);
  --tbl-row-hover-bg: var(--bg-hover);
  --tbl-row-selected-bg: var(--accent-weak);
  --tbl-border: var(--border);
  --tbl-frozen-shadow: 4px 0 10px -6px rgba(16, 32, 29, .18);
  --tbl-cell-px: var(--sp-4);
  /* 数字列对齐（2026-09-30 用户要求「表内数据居中显示」）：原为 right */
  --tbl-num-align: center;

  /* 徽标 / 状态胶囊 */
  --badge-radius: var(--radius-pill);
  --badge-px: 10px;
  --badge-py: 3px;
  --badge-font-size: var(--fs-xs);

  /* 顶部品牌线（全站仅此一处品牌识别，取代原黄黑斜条纹） */
  --brand-line: var(--accent);
  --brand-line-h: 3px;

  /* 卡片 */
  --card-bg: var(--bg-card);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);
  --card-pad: var(--sp-6);

  /* z-index 阶梯 */
  --z-sticky: 20;
  --z-drawer: 60;
}

/* ============================================================================
   打印：浅色主题本身已是浅底深字，只需关掉阴影/悬浮效果并压深强调色，
   不另起一套色板（避免下次改色又要改两处）。
   ========================================================================= */
@media print {
  :root {
    --bg-page: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-inset: #FFFFFF;
    --bg-hover: transparent;

    --accent: #075A4E;          /* 打印时主色加深，避免浅底上发虚 */
    --on-accent: #FFFFFF;

    --tbl-row-alt-bg: #FAFCFB;
    --tbl-row-hover-bg: transparent;
    --tbl-row-selected-bg: transparent;
    --tbl-frozen-shadow: none;

    --shadow-md: none;
    --shadow-lg: none;
  }
}

/* 减少动态效果偏好：全部动效关闭，直接呈现终态 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}