/* ============================================================
   JW 玖梧供应链 · 设计系统 v1.0 (Design Tokens)
   国际视野 B2B 采购平台 · 对齐老站 Apple 风格
   ============================================================ */

:root {
  /* ---- 品牌色（对齐老站 #0071e3，商务调色，降饱和） ---- */
  --jw-blue: #005bb5;
  --jw-blue-hover: #004c99;
  --jw-blue-deep: #003d7a;
  --jw-blue-soft: #eaf2fb;
  --jw-blue-ghost: rgba(0,91,181,0.08);

  --jw-cyan: #00d4aa;          /* 点缀青绿（老站辅助色） */
  --jw-orange: #ff6b00;        /* 促销/询价强调 */
  --jw-red: #ff3b30;           /* 错误/紧急 */

  /* ---- 中性色（Apple 风格灰阶） ---- */
  --jw-ink: #1d1d1f;           /* 主文字（近黑） */
  --jw-ink-2: #3a3a3c;         /* 次级文字 */
  --jw-gray: #6e6e73;          /* 说明文字 */
  --jw-gray-2: #86868b;        /* 弱文字 */
  --jw-gray-3: #aeaeb2;        /* 占位/禁用 */
  --jw-line: #e5e5ea;          /* 分割线 */
  --jw-line-2: #f0f0f2;        /* 浅分割线 */
  --jw-bg: #f5f5f7;            /* 页面背景 */
  --jw-bg-2: #fafafa;          /* 卡片内浅底 */
  --jw-white: #ffffff;
  --jw-dark: #0f172a;          /* 顶栏深色 */
  --jw-dark-2: #1d2433;

  /* ---- 字体 ---- */
  --jw-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
             'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --jw-font-en: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* ---- 字号阶梯 ---- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;

  /* ---- 字重 ---- */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /* ---- 圆角（B2B 克制风格，不用全圆角） ---- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-2xl: 14px;
  --r-full: 999px;

  /* ---- 间距 ---- */
  --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;

  /* ---- 阴影 ---- */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 2px 8px rgba(0,0,0,0.06);
  --sh-lg: 0 8px 24px rgba(0,0,0,0.10);
  --sh-blue: 0 6px 20px rgba(0,113,227,0.16);
  --sh-card-hover: 0 10px 32px rgba(0,0,0,0.10);

  /* ---- 过渡 ---- */
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-md: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   基础重置
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--jw-font);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--jw-ink);
  background: var(--jw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--jw-font); cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: var(--jw-font); }
ul, ol { list-style: none; }

/* ============================================================
   按钮系统（精心雕琢）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: var(--fw-600);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
  white-space: nowrap;
  letter-spacing: 0.2px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }

/* 主按钮 */
.btn-primary {
  background: var(--jw-blue);
  color: #fff;
  padding: 12px 26px;
  font-size: var(--fs-15);
  box-shadow: 0 1px 3px rgba(0,60,120,0.25);
}
.btn-primary:hover { background: var(--jw-blue-hover); box-shadow: 0 2px 6px rgba(0,60,120,0.32); }

/* 次按钮（描边） */
.btn-secondary {
  background: transparent;
  color: var(--jw-blue);
  border: 1px solid var(--jw-blue);
  padding: 11px 26px;
  font-size: var(--fs-14);
}
.btn-secondary:hover { background: var(--jw-blue-soft); }

/* 幽灵按钮（深色底上用） */
.btn-ghost {
  background: transparent;
  color: var(--jw-ink);
  border: 1px solid var(--jw-line);
  padding: 10px 24px;
  font-size: var(--fs-14);
}
.btn-ghost:hover { border-color: var(--jw-gray-3); background: var(--jw-bg-2); }

/* 小按钮 */
.btn-sm { padding: 7px 16px; font-size: var(--fs-13); }
.btn-xs { padding: 5px 12px; font-size: var(--fs-12); }

/* 询价按钮 */
.btn-quote {
  background: #fff;
  color: var(--jw-orange);
  border: 1px solid var(--jw-orange);
  padding: 8px 13px;
  font-size: var(--fs-12);
}
.btn-quote:hover { background: rgba(255,107,0,0.05); }

/* ============================================================
   标签/徽章
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: var(--fw-600);
  line-height: 1.6;
}
.badge-blue { background: var(--jw-blue-soft); color: var(--jw-blue); }
.badge-orange { background: rgba(255,107,0,0.10); color: var(--jw-orange); }
.badge-green { background: rgba(0,212,170,0.12); color: #00a583; }
.badge-gray { background: var(--jw-bg-2); color: var(--jw-gray); }

/* ============================================================
   卡片
   ============================================================ */
.card {
  background: var(--jw-white);
  border: 1px solid var(--jw-line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: all var(--t-md);
}

/* ============================================================
   输入框
   ============================================================ */
.input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--jw-line);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  color: var(--jw-ink);
  background: var(--jw-white);
  outline: none;
  transition: all var(--t-fast);
}
.input:focus {
  border-color: var(--jw-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}
.input::placeholder { color: var(--jw-gray-3); }

/* ============================================================
   中英文双语辅助类
   ============================================================ */
.lang-en { font-family: var(--jw-font-en); letter-spacing: 0.02em; }
.lang-en-label {
  display: block;
  font-family: var(--jw-font-en);
  font-size: var(--fs-11);
  font-weight: var(--fw-500);
  color: var(--jw-gray-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}