/* ==========================================================================
   DWIPhone · 设计系统层 (Design Token Layer)
   --------------------------------------------------------------------------
   目的：把 7850 行散落的硬编码值收敛为一套可复用 token，让全站排版对齐。
   原则：
     1. 品牌色沿用现有取值，视觉识别不变（不重新配色）。
     2. 只收敛「间距 / 圆角 / 阴影 / 字号 / 层级」四类，不改业务布局。
     3. 本文件在 styles.css 之后加载，为覆盖层，不删除任何原规则。
   ========================================================================== */

:root {
  /* ---- 间距刻度：4px 基准，8 档，覆盖原先 22 种杂值 ---- */
  --sp-1: 4px;    /* 图标与文字间隙 */
  --sp-2: 8px;    /* 紧凑控件内边距 */
  --sp-3: 12px;   /* 表单控件内边距 / 卡片内间距 */
  --sp-4: 16px;   /* 卡片标准内边距 */
  --sp-5: 20px;   /* 卡片之间 */
  --sp-6: 24px;   /* 区块内边距 */
  --sp-7: 32px;   /* 区块之间 */
  --sp-8: 40px;   /* 大区块分隔 */
  --sp-9: 56px;   /* 页面级留白 */
  --sp-10: 72px;  /* 首屏大留白 */

  /* ---- 圆角：5 档，替代散落的 6/8/10/12/14/18/999px ---- */
  --r-xs: 6px;    /* 徽标 / 标签 */
  --r-sm: 8px;    /* 输入框 / 小按钮 */
  --r-md: 12px;   /* 按钮 / 小卡片 */
  --r-lg: 16px;   /* 标准卡片 */
  --r-xl: 24px;   /* 弹窗 / 强调容器 */
  --r-full: 999px;/* 药丸 / 头像 */

  /* ---- 阴影：4 档，替代散落的 rgba 拼接 ---- */
  --sh-xs: 0 1px 2px rgba(15, 31, 43, 0.06);
  --sh-sm: 0 2px 8px rgba(15, 31, 43, 0.08);
  --sh-md: 0 8px 24px rgba(15, 31, 43, 0.10);
  --sh-lg: 0 18px 45px rgba(15, 31, 43, 0.12); /* = 原 --shadow */

  /* ---- 语义色（由现有硬编码色收敛而来）---- */
  --c-text:      #1d1d1f;   /* 61 次，最高频正文色 */
  --c-text-2:    #424245;   /* 次级文字 */
  --c-text-3:    #6e6e73;   /* 23 次，辅助/说明文字 */
  --c-bg:        #ffffff;
  --c-bg-2:      #f5f5f7;   /* 39 次，页面底色 */
  --c-bg-3:      #fbfdfd;   /* 浅色卡片底 */
  --c-border:    #d2d2d7;   /* 9 次，分隔线 */
  --c-border-2:  #dfe7ed;   /* = 原 --line */
  --c-brand:     #0f766e;   /* = 原 --brand，17 次 */
  --c-brand-dk:  #115e59;   /* = 原 --brand-dark */
  --c-link:      #0071e3;   /* 7 次，链接蓝 */
  --c-info:      #2563eb;   /* 7 次 */
  --c-danger:    #b91c1c;   /* 8 次 */
  --c-accent:    #e8573f;   /* = 原 --accent */

  /* ---- 字号：7 档 ---- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   21px;
  --fs-2xl:  28px;

  /* ---- 字重 ---- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-heavy: 700;

  /* ---- 控件尺寸：统一高度，全站按钮/输入框不再各写各的 ---- */
  --ctl-sm: 32px;
  --ctl-md: 40px;
  --ctl-lg: 48px;

  /* ---- 层级：消除 1/2/20/40/50/80/1000 混用 ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 800;
  --z-modal: 900;
  --z-toast: 1000;

  /* ---- 布局 ---- */
  --content-max: 1200px;   /* 页面内容最大宽度 */
  --gutter: var(--sp-4);  /* 页面左右留白 */
}

/* ==========================================================================
   归一化：把历史散落值拉回刻度
   只做「同值替换」，不改变任何盒模型结构，因此不会破版。
   ========================================================================== */

/* —— 排版基线：所有页面统一 —— */
body {
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.55;          /* 统一行高，消除 1.4/1.5/1.6 混用 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 标题阶梯：h1-h4 收敛到固定字号/字重/行高 */
h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  line-height: 1.25;          /* 统一标题行高 */
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-medium); }

/* 段落与列表间距统一 */
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

/* —— 卡片：统一内边距、圆角、边框、阴影 —— */
.card,
.panel,
.box {
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  box-shadow: var(--sh-sm);
}

/* —— 表单控件：全站统一高度与焦点态 —— */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  padding: 0 var(--sp-3);
  min-height: var(--ctl-md);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { padding: var(--sp-3); min-height: 96px; line-height: 1.55; }

/* 统一焦点环：可访问性 + 各页一致 */
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

/* —— 徽标/标签 —— */
.badge,
.tag,
.pill {
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  padding: 2px var(--sp-2);
}

/* —— 表格：统一行高与对齐（后台主要痛点）—— */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--sp-3) var(--sp-3); text-align: left; vertical-align: middle; }
th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-3);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border-2);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--c-border-2); }
tbody tr:hover { background: var(--c-bg-3); }

/* —— 数字列统一等宽右对齐（金额/日期不再歪斜）—— */
td.num, th.num,
td[data-numeric], th[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* —— 图片比例：防止机型图高低不一 —— */
img { max-width: 100%; }
.phone-grid img,
.sku-card img,
.product-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--c-bg-2);
}

/* —— 布局抖动消除：卡片网格等高 —— */
/* 注：.phone-grid 已移出本规则（2026-10-02 排版回归修复）。
   首页 #phoneGrid 会把整个 .model-shopper 配置面板渲染为首个子元素；
   styles.css:5178 给 .phone-grid 的桌面布局是 grid-template-columns: 1fr（单列满宽），
   本文件的 repeat(auto-fill, minmax(240px, 1fr)) 会把它压进 240px 轨道
   （实测 1296px → 246.4px）。.phone-grid 布局由 styles.css 负责，本层不介入。
   .sku-grid / .card-grid 在任何页面都没有实际元素使用，保留以备将来卡片网格。 */
.sku-grid,
.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: stretch;
}
.sku-grid > *,
.card-grid > * { height: 100%; }

/* —— 层级收敛 —— */
.toast,
.snackbar {
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: var(--z-toast);
}
.modal,
.modal-backdrop,
.dialog { z-index: var(--z-modal); }
.drawer { z-index: var(--z-drawer); }
.sticky-top { z-index: var(--z-header); }