/* ==========================================================================
 * 聚合页原型底座 · 设计令牌（唯一来源：改这里 = 全站换肤）
 * 换肤只需改「动作与语义」段的 accent 四件套 + on-accent-2；表面/文字/状态色/圆角/高度
 * 为两套已交付原型验证过的中性基线，通常不动。状态色若与业务状态机口径不同，按业务改语义注释。
 * ========================================================================== */

/* Outfit 可变字体（数字专用，已本地化，禁止改 CDN） */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-var.woff2') format('woff2');
}

:root {
  /* ---------- 表面 ---------- */
  --canvas: #E4E6E9;        /* 画布（页面外底色） */
  --bg: #F2F3F5;            /* 页面底 */
  --card: #FFFFFF;          /* 卡片 */
  --inset: #F7F8F9;         /* 内嵌底（输入框 / 平板内层卡） */
  --line: #DFE2E6;          /* 描边 */
  --divider: #EEF0F2;       /* 分割线 / 中性标签底 */
  --seg-track: #E7E9EC;     /* 分段控件槽 */

  /* ---------- 文字 ---------- */
  --ink: #14171A;           /* 墨黑主文字 */
  --ink-2: #5B6470;         /* 次要 */
  --ink-3: #8B939E;         /* 弱 */
  --ink-4: #C3CAD1;         /* 箭头与占位 */
  --on-accent-2: #B9D8C4;   /* 主题深底上的次要字（随 accent 换肤） */

  /* ---------- 动作与语义（★ 换肤点：全站主题只改这一组） ---------- */
  --accent: #0E6B4A;        /* 主题动作色：森绿，只出现在「可按的东西」上（纪律见 README） */
  --accent-deep: #0A5238;   /* 按下/ hover */
  --accent-bg: #E7F2EC;     /* 主题浅底 */
  --accent-line: #C4DCCB;   /* 主题浅描边 */
  --danger: #C0392B;
  --danger-line: #E7C3BE;
  --danger-bg: #FCEBE9;
  --warn: #C2721A;
  --warn-bg: #FFF6E8;
  --warn-line: #F0DFC0;
  --warn-ink: #8A5310;
  --warn-ink-2: #A9762F;

  /* ---------- 状态色（药丸 = 文字色 + 同色浅底；语义名按业务状态机映射，色值建议不动） ---------- */
  --st-pending: #8B939E;                  /* 待支付 */
  --st-paid: #2F6FEB;   --st-paid-bg: #E9F0FD;     /* 已支付 */
  --st-nosend: #C2721A; --st-nosend-bg: #FDF2E3;   /* 待发货（已支付待拣货发货） */
  --st-ready: #0F8A9E;  --st-ready-bg: #E4F3F6;    /* 待取货（自提单已备好待核销） */
  --st-deliver: #6A5ACD; --st-deliver-bg: #EEECFA; /* 配送中（快递/门店配送在途） */
  --st-done: #2E7D32;   --st-done-bg: #E6F2E7;     /* 已完成 */
  --st-refund: #C0392B; --st-refund-bg: #FCEBE9;   /* 已退款 */

  /* ---------- 林木业务专属（资产金融感点缀；金色非动作色，不参与可点元素） ---------- */
  --forest-ink: #14201D;        /* 深底 hero 上的主文字 */
  --forest-deep: #07241D;       /* 深绿 hero / 林木图占位的最深色 */
  --forest-mid: #16624A;        /* 林木图占位的中间绿 */
  --forest-gold: #B8892F;       /* 资产/证书点缀色（金属感，区分"资产"vs"普通商品"） */
  --forest-gold-bg: #F7EFDD;    /* 金色浅底（资产金额、林权编号） */
  --forest-gold-line: #E4D3AE;  /* 金色浅描边 */
  --forest-earth: #6B5B45;      /* 土地/林场场景次色（溯源/庄园） */

  /* ---------- 圆角 ---------- */
  --r-card: 18px;
  --r-inner: 16px;      /* 平板内层卡 */
  --r-btn: 14px;        /* 按钮与输入框 */
  --r-seg: 13px;        /* 分段控件（内 10） */
  --r-icon-btn: 13px;
  --r-pill: 16px;       /* 筛选药丸 */
  --r-status: 14px;     /* 状态药丸 */
  --r-row: 12px;        /* 选中行块 */
  --r-tag: 6px;         /* 小标签 */

  /* ---------- 控件高度 ---------- */
  --h-btn-inline: 46px; /* 行内按钮 */
  --h-btn: 52px;        /* 底部常驻与整屏主按钮 */
  --h-input: 52px;
  --h-icon-btn: 40px;
  --h-pill: 32px;
  --h-tabbar: 92px;

  /* ---------- 阴影 ---------- */
  --shadow-card: 0 1px 2px rgba(20, 23, 26, 0.04), 0 8px 18px rgba(20, 23, 26, 0.05);
  --shadow-seg: 0 1px 3px rgba(20, 23, 26, 0.10);
  --shadow-sheet: 0 -8px 30px rgba(20, 23, 26, 0.12);

  /* ---------- 字体 ---------- */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-num: "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---------- 断点（注释说明，媒体查询无法变量化） ----------
   * < 768px        手机：底部 Tab 栏 / 单列
   * 768 ~ 1023px   大手机·小平板：单列加宽，内容限宽
   * >= 1024px      平板/桌面：左侧 76px 图标 rail + 双栏（列表+详情）
   * App 落地（无媒体查询环境）用窗口尺寸 API + onResize 动态 class 等价实现
   */
  --rail-w: 76px;
  --z-sheet: 900;
  --z-toast: 1000;
}

/* ---------- 基础复位 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  line-height: 1.45;
}
.num, .price, time { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; }
::placeholder { color: var(--ink-3); }