/* ============================================================
   迅踏鲜蔬 · 设计系统 (Design System)
   ------------------------------------------------------------
   定位：令牌层 + 移动优先基础层 + 无障碍增强
   加载顺序：styles.css → responsive.css → design-system.css(本文件)
   原则：仅做「令牌定义 + 增量增强」，不破坏既有组件布局；
        所有覆盖均通过独立令牌名或更具体的选择器完成。

   目录
   1) 配色：品牌绿 50–900 / 陶土橙 / 中性墨色 / 语义色（含对比度实测值）
   2) 字体：8px 基线刻度 + 流式标题 + 多语字体回退
   3) 间距：4px 基准、8px 节奏
   4) 圆角 / 阴影 / 层级 / 动效
   5) 移动优先布局：单列基线 → 断点渐进增强
   6) 触控与无障碍：44px 目标、焦点可见、减少动效、安全区
   ============================================================ */

:root {
  /* ---------- 1) 配色 ---------- */
  /* 品牌绿 50–900（与既有 --green 同源，hue≈158） */
  --brand-50:  oklch(97% 0.014 156);
  --brand-100: oklch(94% 0.028 157);
  --brand-200: oklch(88% 0.048 157);
  --brand-300: oklch(79% 0.070 157);
  --brand-400: oklch(68% 0.086 157);
  --brand-500: oklch(56% 0.092 158);  /* 主色（装饰/大面积） */
  --brand-600: oklch(49% 0.094 158);  /* = 原 --green，白字 5.97:1 PASS */
  --brand-700: oklch(42% 0.078 160);
  --brand-800: oklch(34% 0.064 161);  /* = 原 --green-dark，9.70:1 PASS */
  --brand-900: oklch(26% 0.052 163);  /* = 原 --green-deeper */

  /* 陶土橙（促销/CTA） */
  --accent-50:  oklch(97% 0.016 46);
  --accent-100: oklch(93% 0.032 46);
  --accent-300: oklch(78% 0.070 46);
  --accent-500: oklch(56% 0.112 46);
  --accent-600: oklch(52% 0.112 46);  /* = 原 --orange，白字 6.55:1 PASS */
  --accent-700: oklch(42% 0.098 45);
  --accent-800: oklch(38% 0.090 44);  /* = 原 --orange-dark，10.38:1 PASS */

  /* 中性墨色（微暖 hue=50） */
  --neutral-0:   #ffffff;
  --neutral-50:  oklch(98% 0.004 50);
  --neutral-100: oklch(96% 0.003 50); /* = 原 --bg */
  --neutral-200: oklch(90% 0.004 50); /* = 原 --line-2 */
  --neutral-300: oklch(84% 0.006 50); /* = 原 --line */
  --neutral-500: oklch(56% 0.012 50); /* 次要文字 4.67:1 PASS（修复原 --ink-3 仅 3.24:1） */
  --neutral-600: oklch(48% 0.014 50);
  --neutral-700: oklch(44% 0.016 50); /* = 原 --ink-2，7.81:1 PASS */
  --neutral-900: oklch(28% 0.014 50); /* = 原 --ink，14.64:1 PASS */

  /* 语义色（文字档均 ≥4.5:1；soft 档用于底色） */
  --success:      oklch(50% 0.115 152);  /* 5.68:1 */
  --success-soft: oklch(94% 0.038 152);
  --info:         oklch(50% 0.090 240);  /* 5.92:1 */
  --info-soft:    oklch(95% 0.030 240);
  --warning:      oklch(50% 0.110 75);   /* 6.11:1 */
  --warning-soft: oklch(95% 0.048 78);
  --danger:       oklch(50% 0.135 27);   /* 6.42:1 */
  --danger-soft:  oklch(94% 0.040 27);

  /* 文字专用：品牌绿做文字时用此色（原 --green-light #5a9571 仅 3.50:1，不达标） */
  --green-text: oklch(46% 0.088 157);    /* 6.82:1 PASS */

  /* 兼容旧令牌名：既有组件无需改动即可继承修复后的对比度 */
  --ink-3: var(--neutral-500);
  --green-light-text: var(--green-text);

  /* ---------- 2) 字体 ---------- */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-body: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans",
               "Noto Sans JP", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-price: "SF Mono", "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Consolas, monospace;

  /* 字号刻度（8px 基线，正文 14px 起；1.25 比例） */
  --fs-11: 0.6875rem;   /* 11 标注 */
  --fs-12: 0.75rem;     /* 12 辅助 */
  --fs-13: 0.8125rem;   /* 13 次要 */
  --fs-14: 0.875rem;    /* 14 正文 */
  --fs-16: 1rem;        /* 16 正文强调 */
  --fs-18: 1.125rem;    /* 18 小标题 */
  --fs-20: 1.25rem;     /* 20 卡片标题 */
  --fs-24: 1.5rem;      /* 24 H3 */
  --fs-30: 1.875rem;    /* 30 H2 */
  --fs-36: 2.25rem;     /* 36 H1 */
  --fs-44: 2.75rem;     /* 44 大屏 H1 */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.65;
  --lh-relaxed: 1.8;

  /* 流式标题：小屏不挤、大屏不虚（无需媒体查询） */
  --fs-h1: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-h2: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  --fs-h3: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);

  /* ---------- 3) 间距（4px 基准 / 8px 节奏） ---------- */
  --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; --sp-16: 64px;
  /* 页面左右安全边距：小屏 12px，大屏 32px */
  --gutter: clamp(12px, 3vw, 32px);

  /* ---------- 4) 圆角 / 阴影 / 层级 / 动效 ---------- */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 14px;  --r-lg: 18px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.03);
  --sh-2: 0 2px 6px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.04);
  --sh-3: 0 8px 28px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.05);
  --z-base: 1; --z-sticky: 40; --z-overlay: 60; --z-modal: 80; --z-toast: 100;
  --dur-fast: .16s; --dur: .24s; --dur-slow: .36s;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --tap: 44px;   /* 最小触控目标 */
}

/* ============================================================
   5) 移动优先布局
   基线：单列、流式容器、内容优先；断点向上增强
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* 防止窄屏横向溢出（移动端最常见体验问题） */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--neutral-900);
  background: var(--neutral-100);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* 标题层级：流式字号 + 紧凑行高 */
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3, h4 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p { line-height: var(--lh-normal); }

/* 栅格：默认单列；用 auto-fit 在可用空间足够时自动加列（免媒体查询） */
.grid, .grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;              /* 基线：手机单列 */
}
@media (min-width: 400px) {
  /* 小屏也放两列：商品卡信息密度高，两列比单列更易比价 */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 576px) {  /* 大手机 / 小平板 */
  :root { --fs-14: 0.9375rem; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {  /* 平板 */
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {  /* 笔记本 */
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { /* 桌面 */
  .container, .view { max-width: 1240px; }
}

/* 页面容器：统一左右安全边距 */
.container, .view, .footer-inner, .wb-content {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

/* 双栏（详情/结算）：手机堆叠，平板起并排 */
.two-col { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 992px) { .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* 商品卡：统一圆角/阴影/悬停微交互（仅动 transform 与 box-shadow） */
.product-card, .card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .card-hover:hover, .product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
  }
}
.product-card:active { transform: scale(.99); }

/* 商品图：锁定比例，避免不同尺寸图片造成卡片错位 */
.product-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 文本截断：长商品名不撑破卡片 */
.product-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}

/* 价格用等宽数字，避免多语言环境下跳动 */
.product-price, .tier-price, .num { font-family: var(--font-price); font-variant-numeric: tabular-nums; }

/* 工具类：纵向堆叠 / 横向簇（8px 节奏） */
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   6) 触控与无障碍
   ============================================================ */
/* 最小触控目标 44×44（WCAG 2.2 2.5.8 / 移动端实践基线） */
.btn, button, [role="button"], .chip, select, input[type="checkbox"], input[type="radio"] {
  min-height: var(--tap);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-4); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); }   /* 次级操作允许 36px（同排密集操作） */
select, input, textarea { min-height: var(--tap); }

/* 键盘焦点可见（不依赖鼠标） */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* 触屏去除灰色高亮块，改用轻微缩放反馈 */
button, .btn, .card, .wb-mod { -webkit-tap-highlight-color: transparent; }

/* 尊重系统「减少动效」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度偏好：加粗分隔线，弱化阴影依赖 */
@media (prefers-contrast: more) {
  :root { --line: var(--neutral-500); --line-2: var(--neutral-300); }
  .card, .product-card { border: 1px solid var(--neutral-300); }
}

/* 刘海屏 / 全面屏安全区（APP 内嵌 webview 与小程序场景） */
@supports (top: env(safe-area-inset-top)) {
  .topbar, .wb-topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
  .site-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* 表格：窄屏横向滚动且吸附表头，避免撑破布局 */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 100%; }

/* 次要文字统一走修复后的中性色，保证 4.5:1 对比度 */
.muted, .product-origin, .price-note, .sub, .sub2 { color: var(--neutral-500); }