/* ===========================================================================
   上港拼箱 · 手机端设计令牌 (Design Tokens)
   tokens.css  ·  v1.0
   ---------------------------------------------------------------------------
   本文件是全项目颜色 / 字体 / 字号 / 尺寸 / 圆角 / 阴影的【唯一真值】。

   来源：
     docs/ui/mobile-outdoor-industrial-style-guide.md
     docs/ui/mobile-prototype-baseline.md
     docs/ui/mobile-ui-guidelines.md
   以上三份文档描述"什么时候用哪个"，本文件规定"具体是多少"。

   ★ 硬性规则（同步写入 AGENTS.md）：
     1. 任何页面、组件、样式中，禁止出现写死的颜色值、字号、圆角、控件高度。
        一律使用 var(--xxx)。
     2. 本文件中没有的值，不得自行新增变量、也不得写死。
        必须先向产品负责人确认，由其决定是否扩充本文件。
     3. 每个页面只允许存在 0 个 :root 块。:root 只在本文件中出现一次。
   =========================================================================== */

:root {

  /* =========================================================================
     1. 基础色板 —— 原始值，不直接在页面中使用，供下方语义层引用
     ========================================================================= */

  /* 中性色（深墨 → 浅纸） */
  --c-ink:            #071927;   /* 正文与关键值 */
  --c-sub:            #3f5264;   /* 次级文字 */
  --c-muted:          #56697b;   /* 字段名、辅助说明 */
  --c-line:           #aebdca;   /* 硬边界 */
  --c-soft-line:      #c6d2de;   /* 弱分隔线 */
  --c-panel:          #ffffff;   /* 卡片底 */
  --c-paper:          #edf3f7;   /* 页面底 */

  /* 港区蓝 —— 进行中 / 信息 / 主品牌 */
  --c-port:           #005f8c;
  --c-port-deep:      #063f62;   /* 原 --port-2，统一取深值 */
  --c-blue-soft:      #d2ebf6;

  /* 绿 —— 通过 / 完成 / 已满足 */
  --c-green:          #05724f;
  --c-green-soft:     #d8efe5;

  /* 黄 —— 提醒 / 待补 / 待确认 */
  --c-amber:          #965800;
  --c-amber-soft:     #ffe0a3;

  /* 红 —— 异常 / 冻结 / 高风险 */
  --c-red:            #b42318;
  --c-red-soft:       #ffe5e1;

  /* 紫 —— 管理类 / 特殊分类（不用于高风险） */
  --c-purple:         #51409d;
  --c-purple-soft:    #e5dfff;

  /* 场区绿底 —— 场内 / 在库类背景块 */
  --c-yard:           #d8eee6;

  /* 信息块与交互态 */
  --c-info-bg:        #fbfdff;
  --c-info-border:    #b7c6d3;
  --c-active-bg:      #075f89;   /* 选中 / 激活底 */
  --c-active-border:  #003f61;
  --c-active-ink:     #ffffff;
  --c-btn-border:     #0b5478;   /* 主按钮描边 */
  --c-select-track:   #d8e3eb;   /* 分段控件轨道 */
  --c-tag-bg:         #edf3f7;   /* 属性标签底 */
  --c-tag-ink:        #29485d;   /* 属性标签字 */


  /* =========================================================================
     2. 语义色 —— 页面中请优先使用这一层
     ========================================================================= */

  --ink:              var(--c-ink);
  --sub:              var(--c-sub);
  --muted:            var(--c-muted);
  --line:             var(--c-line);
  --soft-line:        var(--c-soft-line);
  --panel:            var(--c-panel);
  --paper:            var(--c-paper);

  --port:             var(--c-port);
  --port-2:           var(--c-port-deep);
  --blue-soft:        var(--c-blue-soft);
  --green:            var(--c-green);
  --green-soft:       var(--c-green-soft);
  --amber:            var(--c-amber);
  --amber-soft:       var(--c-amber-soft);
  --red:              var(--c-red);
  --red-soft:         var(--c-red-soft);
  --purple:           var(--c-purple);
  --purple-soft:      var(--c-purple-soft);
  --yard:             var(--c-yard);

  --info-bg:          var(--c-info-bg);
  --info-border:      var(--c-info-border);
  --active-bg:        var(--c-active-bg);
  --active-border:    var(--c-active-border);
  --active-ink:       var(--c-active-ink);
  --btn-border:       var(--c-btn-border);
  --select-track:     var(--c-select-track);
  --tag-bg:           var(--c-tag-bg);
  --tag-ink:          var(--c-tag-ink);

  /* 状态语义（等价于上方基础状态色，供状态胶囊专用，便于日后单独调整） */
  --status-blue:      var(--c-active-bg);
  --status-green:     var(--c-green);
  --status-amber:     #9a5b00;
  --status-red:       var(--c-red);


  /* =========================================================================
     3. 字体
     --------------------------------------------------------------------
     ★ 排序原则：保持原型既有顺序不变，仅在末尾追加安卓回退项。
       这样在 Mac / iOS 上的渲染结果与既有原型完全一致（便于视觉比对），
       在普通安卓设备上又能正确回退，不会掉到无衬线默认字体。
     ★ 安卓真机上 PingFang SC / DIN Alternate 均不存在；中文由
       Noto Sans CJK SC 承接（安卓自带），不打包中文字体（体积过大）。
     ★ 数字字体当前不打包独立资源，直接使用原型环境字体与系统回退，
       配合 tabular-nums 保持数字对齐。
     ========================================================================= */

  --font:
    "HarmonyOS Sans SC",   /* 华为设备 */
    "PingFang SC",         /* Mac / iOS —— 原型评审环境 */
    "Noto Sans CJK SC",    /* 普通安卓 */
    "Source Han Sans SC",
    system-ui,
    "Microsoft YaHei",
    sans-serif;

  --num-font:
    "DIN Alternate",       /* Mac —— 原型评审环境 */
    "DIN Condensed",
    "Avenir Next",
    "Inter",
    "SF Pro Text",
    system-ui,             /* 安卓兜底 */
    sans-serif;


  /* =========================================================================
     4. 字号 —— 全部为固定值，禁止使用 vw / clamp 等随视口缩放的写法
     （采纳 mobile-outdoor-industrial-style-guide.md 的精确值；
       mobile-ui-guidelines.md 中的区间表已废止，改为引用本节变量）
     ========================================================================= */

  --type-page-title:      24px;  /* 顶部标题色块主标题 */
  --type-section-title:   17px;  /* 卡片标题、弹框标题、区块标题 */
  --type-document-title:  17px;  /* 单据类标题（等同区块标题） */
  --type-record-title:    16px;  /* 作业记录、列表项标题 */
  --type-object:          20px;  /* 列表卡片内的主对象：车牌 / 进仓编号 */
  --type-object-lg:       26px;  /* 强上下文主对象：叫车确认、正面吊指令台箱号 */
  --type-metric:          28px;  /* 工作台入口卡的大数字 */
  --type-metric-lg:       42px;  /* 正面吊首页分类卡的大数字 */
  --type-field-value:     14px;  /* 信息块字段值 */
  --type-button:          15px;  /* 主 / 次 / 列表动作按钮文字 */
  --type-aux:             12px;  /* 字段名、时间、刷新提示、副标题 */
  --type-status:          12px;  /* 状态胶囊 */

  /* 字重 —— 不使用 900/950 堆强度，对比靠颜色 / 边框 / 尺寸 / 层级 */
  --weight-title:  650;
  --weight-main:   600;
  --weight-aux:    500;


  /* =========================================================================
     5. 页面骨架尺寸
     ========================================================================= */

  --statusbar-h:     38px;                 /* 状态栏 */
  --topbar-h:        70px;                 /* 港区蓝标题色块 */
  --chrome-h:        108px;                /* 状态栏 + 标题栏 */
  --content-h:       calc(100% - var(--chrome-h));
  --content-pad-top: 12px;
  --page-pad-x:      16px;                 /* 页面左右内边距 */

  /* 原型画板专用（真机不使用，见文末「真机适配」） */
  --artboard-w:      390px;
  --artboard-h:      844px;
  --radius-shell:    38px;
  --radius-screen:   28px;


  /* =========================================================================
     6. 圆角
     ========================================================================= */

  --radius-card:   8px;   /* 卡片 */
  --radius-btn:    8px;   /* 按钮 */
  --radius-info:   6px;   /* 信息块 */
  --radius-tag:    5px;   /* 属性标签 */
  --radius-qr:    10px;   /* 二维码卡片 */
  --radius-nav:   12px;   /* 标题栏返回导航键 */
  --radius-sheet: 22px;   /* 底部弹框 */


  /* =========================================================================
     7. 控件高度 —— 全部适配戴手套点击，禁止低于 42px
     ========================================================================= */

  --btn-h:             48px;  /* 主按钮 / 次按钮 / 危险按钮 / 弹框按钮 */
  --btn-h-photo:       46px;  /* 拍照区主按钮「拍照」 */
  --btn-h-photo-mini:  42px;  /* 拍照区小按钮「查看全部 / + 补充类型」 */
  --btn-h-location-slot: 36px; /* 指定目标库位矩阵的紧凑库位按钮 */
  --btn-h-support:     44px;  /* 「特殊处理与异常上报」低频入口 */
  --btn-h-end-wait:    52px;  /* 二维码等待页「结束等待」 */
  --nav-btn-size:      44px;  /* 标题栏返回导航键 44 × 44 */
  --input-h:           44px;  /* 普通输入框最小高度 */
  --btn-border-w:       2px;  /* 按钮 / 硬边界统一描边宽度 */


  /* =========================================================================
     8. 底部固定操作区
     ========================================================================= */

  --fixed-actions-h:       132px;  /* 内容区需预留的底部留白 */
  --fixed-actions-x:        16px;
  --fixed-actions-bottom:   14px;
  --fixed-actions-gap:       8px;


  /* =========================================================================
     9. 底部弹框
     ========================================================================= */

  --scrim:           rgba(7, 25, 39, .34);  /* 遮罩 */
  --sheet-margin:    12px;                  /* 弹框外层安全边距 */
  --sheet-pad:       14px;
  --sheet-handle-w:  44px;
  --sheet-handle-h:   4px;


  /* =========================================================================
     10. 二维码等待页
     ========================================================================= */

  --qr-size:         194px;
  --qr-quiet:         10px;   /* 二维码外白边 */
  --qr-border-w:       2px;   /* 深墨硬边框 */
  --qr-countdown-h:   42px;   /* 倒计时条 */


  /* =========================================================================
     11. 阴影 —— 现场使用硬阴影，不用弥散淡阴影表达关键信息
     ========================================================================= */

  --shadow-btn:     0 4px 0 rgba(6, 63, 98, .24);
  --shadow-btn-lg:  0 4px 0 rgba(6, 63, 98, .24), 0 9px 16px rgba(7, 25, 39, .12);
  --shadow-nav:     0 8px 16px rgba(7, 25, 39, .18);   /* 标题栏内返回键 */
  --shadow-card:    0 12px 24px rgba(7, 25, 39, .16);  /* 卡片 / 弹框 / 二维码卡片 */


  /* =========================================================================
     12. 图标
     ========================================================================= */

  --icon-size:         18px;
  --icon-stroke:       2.25;
  --nav-arrow-size:    17px;
  --nav-arrow-stroke:  2.2;


  /* =========================================================================
     13. 真机适配 —— 替代原型画板的固定 390 × 844
     ========================================================================= */

  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --viewport-h:   100dvh;   /* 动态视口高度，避免地址栏伸缩导致跳动 */
}


/* ===========================================================================
   ★ 本文件到此结束，只包含变量定义与字体声明，不包含任何会主动生效的样式规则。

   全局重置（box-sizing、body 基线、数字字体工具类）位于 docs/ui/base.css。
   base.css 仅供真机 APP 引入；原型 HTML 只引入 tokens.css，
   以免影响原型既有的渲染结果。
   =========================================================================== */