/* ============================================================================
   妙林国际物流 · 四端统一设计系统（Design Tokens）
   ----------------------------------------------------------------------------
   版本 : v2.0.0  (2026-10-18)
   定位 : 商务感 × 国际化。以中性灰阶承载内容层次，品牌蓝仅作点睛；
          数字一律等宽对齐，中英混排按国际商务出版规范处理。
   覆盖 : 官网 / 货代系统(TMS) / APP / 小程序（小程序见 styles/tokens.wxss）
   ----------------------------------------------------------------------------
   用法 : 在原有样式表【之后】引入本文件即可，顺位在覆盖层之前
            <link rel="stylesheet" href="/css/ml-design-system.css?v=v2">
   回滚 : 删掉这一行 link 即完全复原，不改动任何原有样式文件。
   原则 : 本文件只定义变量与少量基础排版，不写业务组件。
          业务组件一律放进各端覆盖层（官网 ml-biz-intl.css / TMS ml-biz-tms.css）。
   ----------------------------------------------------------------------------
   命名 : --ml-<类别>-<层级>
          色阶 ml-n-0 … ml-n-900（neutral）  品牌 ml-brand-*
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 中性灰阶 */
  /* 国际商务视觉的骨架：靠灰阶做层次，而不是靠颜色。数值按 WCAG 对比度校准。 */
  --ml-n-0:    #ffffff;
  --ml-n-25:   #fbfcfd;
  --ml-n-50:   #f6f7f9;
  --ml-n-100:  #eef0f4;
  --ml-n-150:  #e4e7ec;
  --ml-n-200:  #d9dde3;
  --ml-n-300:  #c2c8d1;
  --ml-n-400:  #9aa3b0;
  --ml-n-500:  #737d8b;
  --ml-n-600:  #5f6b7a;
  --ml-n-700:  #454f5c;
  --ml-n-800:  #2b3340;
  --ml-n-850:  #1f2530;
  --ml-n-900:  #141920;
  --ml-n-950:  #0d1117;

  /* ---------------------------------------------------------------- 品牌色阶 */
  --ml-brand:        #165DFF;
  --ml-brand-hover:  #0E4FE0;
  --ml-brand-active: #0A3FC4;
  --ml-brand-50:     #F2F6FF;
  --ml-brand-100:    #E8F0FF;
  --ml-brand-200:    #CBDBFF;
  --ml-brand-300:    #9DBCFF;
  --ml-brand-glow:   rgba(22, 93, 255, .14);

  /* ---------------------------------------------------------------- 语义色 */
  --ml-success:      #17845B;
  --ml-success-bg:   #E8F6F0;
  --ml-warning:      #B2670A;
  --ml-warning-bg:   #FDF3E3;
  --ml-danger:       #C2334B;
  --ml-danger-bg:    #FCECEE;
  --ml-info:         #1B6BA8;
  --ml-info-bg:      #E9F3FB;

  /* ---------------------------------------------------------------- 排版 */
  /* 拉丁文用 Inter 打底（国际商务标准配置），中文回落到系统黑体。 */
  --ml-font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont,
                  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --ml-font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code',
                  ui-monospace, Consolas, 'Courier New', monospace;

  /* 字阶：1.200（minor third）等比，取 8 档，避免页面出现野值 */
  --ml-fs-11: 11px;
  --ml-fs-12: 12px;
  --ml-fs-13: 13px;
  --ml-fs-14: 14px;   /* 正文默认 */
  --ml-fs-16: 16px;   /* 大正文 / 卡片标题 */
  --ml-fs-19: 19px;
  --ml-fs-23: 23px;   /* 区块标题 */
  --ml-fs-28: 28px;
  --ml-fs-34: 34px;   /* 页面主标题 */
  --ml-fs-42: 42px;   /* hero */
  --ml-fs-52: 52px;

  --ml-lh-tight: 1.18;   /* 大标题 */
  --ml-lh-snug:  1.35;   /* 小标题 */
  --ml-lh-base:  1.68;   /* 正文（中文舒适区，比 1.6 略松） */
  --ml-lh-loose: 1.85;   /* 长段落 */

  --ml-fw-regular: 400;
  --ml-fw-medium:  500;
  --ml-fw-semi:    600;
  --ml-fw-bold:    700;

  /* 国际版字距：拉丁文标题收紧、全大写小标题放宽（经典商务排版规则） */
  --ml-ls-tight:   -.015em;
  --ml-ls-normal:  0;
  --ml-ls-wide:    .04em;
  --ml-ls-wider:   .10em;   /* 用于 eyebrow / 全大写标签 */

  /* ---------------------------------------------------------------- 间距 */
  /* 4px 基准。页面纵向节奏只用 4 的倍数，杜绝 7/13/15 这类野值。 */
  --ml-sp-1:  4px;
  --ml-sp-2:  8px;
  --ml-sp-3:  12px;
  --ml-sp-4:  16px;
  --ml-sp-5:  20px;
  --ml-sp-6:  24px;
  --ml-sp-8:  32px;
  --ml-sp-10: 40px;
  --ml-sp-12: 48px;
  --ml-sp-16: 64px;
  --ml-sp-20: 80px;
  --ml-sp-24: 96px;

  /* ---------------------------------------------------------------- 形状 */
  --ml-r-xs: 4px;
  --ml-r-sm: 6px;
  --ml-r-md: 10px;
  --ml-r-lg: 14px;
  --ml-r-xl: 20px;
  --ml-r-pill: 999px;

  /* 阴影：偏冷调（rgba 带一点蓝），比纯黑阴影更像高端商务物料 */
  --ml-sh-xs: 0 1px 2px rgba(20, 25, 32, .05);
  --ml-sh-sm: 0 1px 3px rgba(20, 25, 32, .07), 0 1px 2px rgba(20, 25, 32, .04);
  --ml-sh-md: 0 4px 12px rgba(20, 25, 32, .07), 0 2px 4px rgba(20, 25, 32, .04);
  --ml-sh-lg: 0 12px 32px rgba(20, 25, 32, .09), 0 4px 8px rgba(20, 25, 32, .04);
  --ml-sh-xl: 0 24px 56px rgba(20, 25, 32, .12);
  --ml-sh-focus: 0 0 0 3px var(--ml-brand-glow);

  /* ---------------------------------------------------------------- 边框 */
  --ml-bd:        1px solid var(--ml-n-200);
  --ml-bd-light:  1px solid var(--ml-n-150);
  --ml-bd-strong: 1px solid var(--ml-n-300);

  /* ---------------------------------------------------------------- 动效 */
  /* 入场快、收尾缓，接近 Apple/Material 的商务观感 */
  --ml-ease:      cubic-bezier(.22, 1, .36, 1);
  --ml-ease-in:   cubic-bezier(.4, 0, 1, 1);
  --ml-dur-fast:  140ms;
  --ml-dur-base:  220ms;
  --ml-dur-slow:  380ms;

  /* ---------------------------------------------------------------- 层级 */
  --ml-z-header: 100;
  --ml-z-fab:    90;
  --ml-z-modal:  200;
}

/* ============================================================================
   基础排版规范（只作用于「没有自己字体设置」的裸文本，避免影响业务样式）
   ========================================================================== */
body {
  font-family: var(--ml-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字等宽对齐：金额、重量、时效、单号对齐后专业度提升最明显 */
.ml-num,
[data-ml-num],
td.is-num,
th.is-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 全大写小标签（Eyebrow）：国际商务版面常用的「栏目引子」 */
.ml-eyebrow {
  display: inline-block;
  font-size: var(--ml-fs-11);
  font-weight: var(--ml-fw-semi);
  letter-spacing: var(--ml-ls-wider);
  text-transform: uppercase;
  color: var(--ml-brand);
}

/* 英文正文/标题：拉丁文排版规则（略紧字距 + 更松行高） */
.ml-en,
[data-i18n][lang="en"] {
  letter-spacing: var(--ml-ls-tight);
}

/* 双语并排：中文主、英文辅，英文小一号、灰一档 */
.ml-bi__en {
  display: block;
  margin-top: var(--ml-sp-1);
  font-size: .82em;
  font-weight: var(--ml-fw-regular);
  letter-spacing: var(--ml-ls-wide);
  color: var(--ml-n-500);
  text-transform: none;
}

/* 要点列表：替代「、」串联的长句，提升扫读效率 */
.ml-points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-points > li {
  position: relative;
  padding-left: var(--ml-sp-4);
  margin: var(--ml-sp-2) 0;
  font-size: var(--ml-fs-14);
  line-height: var(--ml-lh-base);
  color: var(--ml-n-700);
}
.ml-points > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ml-brand-300);
}

/* 分隔线 */
.ml-rule {
  height: 1px;
  border: 0;
  background: var(--ml-n-150);
  margin: var(--ml-sp-8) 0;
}

/* 可访问性：键盘焦点统一走品牌光圈，不破坏原布局 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ml-brand);
  outline-offset: 2px;
  border-radius: var(--ml-r-xs);
}

/* 尊重系统的「减少动效」设置（无障碍，也是国际站点常见合规项） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 打印：商务场景常需打印报价/委托单，去掉底色与阴影，保留结构 */
@media print {
  :root {
    --ml-sh-xs: none;
    --ml-sh-sm: none;
    --ml-sh-md: none;
    --ml-sh-lg: none;
    --ml-sh-xl: none;
  }
}