/* ============================================================================
   tokens.css — MEG TradesPortal 设计 token 唯一真源（P5 · 阶段体系 v8 · W0）
   ----------------------------------------------------------------------------
   来源：assets/css/styles.css 2026-09-08 实测（521 行 / 26.8KB）
   说明：
     1. 第一块「A. styles.css :root 原有变量（原样复制）」= styles.css 第 1-34 行
        :root 全量 28 个自定义属性，同名同值逐字节复制（含注释）。
        零视觉变化承诺：旧页面本波不引入本文件，行为完全不变；新页面引用后，
        凡与旧页面共用 token 的值一致。
     2. 后续块「B-E」= v8 新增语义 token。值以《P5_增量设计_W0W1_2026-09-08.md》
        §2.2–§2.4 实测表为准，并由 styles.css 硬编码值逐一实测确认。
     3. W0 阶段：本文件仅供新界面（看板 v8 / W3 选货）引用；旧页面暂不引入。
   ========================================================================== */


/* ============================================================================
   A. styles.css :root 原有变量（原样复制 · 28 个）
   ========================================================================== */
:root {
  /* MEG Outdoor Living brand palette */
  --meg-ink: #16241c;
  --meg-green-900: #0B2E22;
  --meg-green-800: #14532D;
  --meg-green-700: #1B4332;
  --meg-green-600: #2D6A4F;
  --meg-green-500: #40916C;
  --meg-green-300: #95D5B2;
  --meg-green-100: #D8F3DC;
  --meg-timber: #B08968;
  --meg-sand: #DDA15E;
  --meg-paper: #F6F4EF;
  --meg-paper-2: #FFFFFF;
  --meg-line: #E3DED4;
  --meg-muted: #6B7A6F;
  --meg-red: #C1452F;
  --meg-red-soft: #FBE6E1;
  --meg-amber: #B7791F;
  --meg-amber-soft: #FCF3DF;

  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 3px rgba(16,36,28,.08), 0 1px 2px rgba(16,36,28,.04);
  --shadow-lg: 0 14px 34px rgba(16,36,28,.14);

  /* generic aliases used across modules */
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --green-700: #1B4332;
  --red-500: #C1452F;
  --green-50: #ecfdf3;
  --green-600: #2D6A4F;
}


/* ============================================================================
   B. 颜色 · 语义化（styles.css 硬编码散值归一，值 = 实测；原处不改动）
   ========================================================================== */
:root {
  /* 深色底/彩色底上的文字（topbar / nav / footer / 按钮） */
  --on-green-deep: #fff;              /* 深绿底上文字（topbar/nav/brand/footer 亮字） */
  --on-sand: #3a2a12;                 /* 沙色底上文字（btn-amber / chip-stage / doing 节点） */
  --on-amber: #6b4e16;                /* 琥珀底上文字（mode-banner / stock-low / order-status） */
  --amber-border: #ecd9a6;            /* 琥珀强调细边（mode-banner 下边框等） */

  /* 警示 / 失效 / 出库 */
  --on-red: #8a2c1c;                  /* 红底/警示文字（stock-out / po-expiry.expired） */
  --red-out-bg: #fbf3f1;              /* 出库/失效行底（po-row-out） */
  --red-line: #e0a8a0;                /* 失效红细描边（expired 边框） */

  /* 禁用 / 悬停（轻反馈） */
  --green-disabled: #b9c7bf;          /* btn-primary:disabled 底 */
  --sand-hover: #cf8f4f;              /* btn-amber:hover */
  --ghost-hover: #eceadf;             /* ghost hover / btn-ghost:disabled 底 */

  /* 要素 chip（中性） */
  --chip-element-bg: #eef1f4;
  --chip-element-ink: #374151;

  /* "Done" 横幅（po-done-banner：渐变 3 档 + 文字） */
  --done-grad-a: #e6f6ec;
  --done-grad-b: #d4efe0;
  --done-line: #bfe3cd;
  --done-ink: #1a7a3d;

  /* 遮罩 */
  --overlay: rgba(11,46,34,.45);      /* modal-overlay（通用） */
  --overlay-deep: rgba(16,36,28,.55); /* PO detail modal-overlay */

  /* 自动行 / 服务行底色 + 补定义 --meg-navy */
  --row-gen-bg: rgba(110, 155, 60, .045);
  --row-service-bg: rgba(26, 37, 64, .035);
  --meg-navy: #1a2540;                /* 补定义：styles.css .po-row-service 引用 var(--meg-navy)
                                         但 :root 未声明（R2，真 bug → 现落空继承）；此处只补 token，
                                         不改 styles.css。正式修复留 W5 收编。 */

  /* 页脚 / 深绿底文字 4 档（styles.css 第 60/74/85/258-265 行实测） */
  --foot-text: #cfe8d8;               /* nav a / site-footer 正文 */
  --foot-text-strong: #eafff1;        /* account-chip 文字 */
  --foot-text-muted: #7f9b8b;         /* foot-copy */
  --foot-text-faint: #4f6b5c;         /* foot-links .dot 分隔 */
}


/* ============================================================================
   C. 字体 / 字号 / 行高 / 字重（styles.css 实测出现值）
   ========================================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;

  /* 字号（px，实测出现值全量：10-19、23、26；含 16 = qty-control 按钮） */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-23: 23px;
  --fs-26: 26px;

  /* 行高 */
  --lh-body: 1.55;                    /* body 正文 */
  --lh-text: 1.45;                    /* po-detail / 紧凑文本 */
  --lh-head: 1.2;                     /* 标题/行首 */
  --lh-tight: 1.05;                   /* brand-text 竖排小标签 */

  /* 字重 */
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
}


/* ============================================================================
   D. 间距 / 圆角 / 阴影 / 边框 / 布局（实测出现值归一）
   ========================================================================== */
:root {
  /* 间距（px，实测出现值全量：2,3,4,6,8,10,11,12,14,16,18,20,22,24） */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;

  /* 圆角：--radius/--radius-sm 原样保留（见 A）；散值 6/7/8/10px 归一 + pill */
  --radius-xs: 6px;                   /* 新增（product-spec 等原 6px 散值） */
  --radius-7: 7px;                    /* po-opt 原 7px */
  --radius-8: 8px;                    /* nav/po-opt/qty 原 8px */
  --radius-10: 10px;                  /* search-box/modal 原 10px */
  --radius-pill: 999px;

  /* 边框线宽 */
  --border-w: 1px;
  --border-w-2: 2px;
  --border-w-3: 3px;                  /* topbar 下 3px / 自动行左 3px 强调 */

  /* 布局 */
  --container-max: 1200px;            /* .container / .foot-inner 实测 */
  --topbar-h: 62px;                   /* .topbar 实测 */
  --focus-ring: 2px solid var(--meg-green-500);   /* :focus-visible（2px green-500） */
  --focus-offset: 2px;
}