/* ========================================================================
   猿助网 Design Tokens —— 单一变量源
   文件位置: src/main/resources/templates/static/css/latest/tokens.css
   加载顺序: header.html 中必须排在 index3.css 之前（最先加载）
   说明: 本文件是所有设计令牌的唯一来源，包含变量定义 + 基础 reset +
         旧变量名兼容层（渐进迁移期保留，确保引用旧变量的页面无感知）
   ======================================================================== */

:root {
  /* ========== 1. 颜色令牌 ========== */
  /* 品牌主色（收敛 9 个红色变体为唯一变量树） */
  --color-primary: #d8373e;            /* 品牌红，唯一红色源 */
  --color-primary-hover: #c22c32;      /* hover 态 */
  --color-primary-active: #b52a30;     /* active/按下 态 */
  --color-primary-bg: #fef5f5;         /* 淡红背景（空状态圆圈） */
  --color-primary-bg-soft: rgba(216, 55, 62, 0.08);  /* 淡红悬浮背景 */
  --color-primary-border: rgba(216, 55, 62, 0.18);   /* 红色边框（卡片hover） */
  --color-primary-shadow: rgba(216, 55, 62, 0.30);   /* 红色按钮阴影 */

  /* 功能色 */
  --color-success: #2ecc71;            /* 成功 */
  --color-success-hover: #27ae60;      /* 成功 hover */
  --color-success-active: #219653;     /* 成功 active */
  --color-warning: #f9b529;            /* 警告 */
  --color-error: #d8373e;              /* 错误（复用品牌红） */
  --color-info: #3498db;
  --color-blue: #1677ff;            /* login3.css 链接/信息蓝（阶段1补充，阶段2亦列） */
  --color-green-accent: #52c41a;    /* login3/points 任务完成绿（阶段1补充） */
  --color-green-accent-bg: #f6ffed;   /* 完成绿背景（action-btn.auto / success-bg-strong 同值） */
  --color-wechat: #07c160;            /* 微信按钮（阶段2新增） */
  --color-wechat-hover: #06ad56;      /* 微信 hover（阶段2新增） */

  /* 状态背景色（阶段2新增） */
  --color-success-bg: #e8f5e9;        /* 成功背景（order/user status-completed） */
  --color-success-bg-strong: #f6ffed; /* 成功背景强（action-btn.auto） */
  --color-warning-bg: #fff7e6;        /* 警告背景（pay 倒计时） */

  /* 渐变伴色（阶段2新增） */
  --color-primary-light: #ff6b6b;     /* 与 primary 搭配的浅红渐变端 */
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));


  /* 文字色层级（5 级） */
  --color-text-primary: #20232a;       /* 最强：商品标题/页面H1 */
  --color-text-body: #333333;          /* 正文 */
  --color-text-secondary: #666666;     /* 次要 */
  --color-text-tertiary: #999999;      /* 辅助/占位 */
  --color-text-disabled: #cccccc;      /* 禁用 */
  --color-text-placeholder: #bbbbbb;   /* 输入框 placeholder */

  /* 背景色层级 */
  --color-bg-page: #f8f9fa;            /* 页面底色 */
  --color-bg-card: #ffffff;            /* 卡片 */
  --color-bg-hover: #fafafa;           /* 悬浮/斑马纹 */
  --color-bg-muted: #f2f4f8;           /* 图片占位底（goods-img-box 现用值） */

  /* 边框色 */
  --color-border: #edf0f5;             /* 卡片边框（goods-item 现用值，统一） */
  --color-border-strong: #e5e5e5;
  --color-border-input: #d0d5dd;       /* 登录页输入框边框（阶段5补充，比 strong 深） */      /* 输入框边框（统一，废弃 #eee 混用） */
  --color-border-light: #f0f0f0;       /* 轻边框 */
  --color-divider: #f1f2f5;            /* 分割线 */

  /* ========== 2. 字体令牌（8 级比例尺） ========== */
  --font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;

  /* 页面主标题 H1 */
  --font-size-h1: 28px;
  --font-weight-h1: 700;
  --line-height-h1: 1.3;

  /* 二级标题 H2 */
  --font-size-h2: 22px;
  --font-weight-h2: 600;
  --line-height-h2: 1.35;

  /* 模块标题/空状态标题 H3 */
  --font-size-h3: 18px;
  --font-weight-h3: 600;
  --line-height-h3: 1.4;

  /* 卡片标题 */
  --font-size-card-title: 16px;
  --font-weight-card-title: 600;
  --line-height-card-title: 1.5;

  /* 正文（goods-name 现值） */
  --font-size-body: 14px;
  --font-weight-body: 400;
  --line-height-body: 1.6;

  /* 辅助文字（顶栏现值） */
  --font-size-caption: 13px;
  --font-weight-caption: 400;
  --line-height-caption: 1.5;

  /* 标签文字（tag 现值） */
  --font-size-label: 12px;
  --font-weight-label: 500;
  --line-height-label: 1.2;

  /* 按钮文字 */
  --font-size-btn: 14px;
  --font-weight-btn: 600;
  --line-height-btn: 1;

  /* 价格（强视觉锤，goods .price 现值） */
  --font-size-price: 17px;
  --font-weight-price: 600;

  /* 超小标签文字（10/11px 现状值） */
  --font-size-mini: 11px;

  /* 字重语义令牌（收敛 bold/500/600/700/800 混用） */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========== 3. 间距令牌（4px 基准） ========== */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ========== 4. 圆角令牌 ========== */
  --radius-sm: 4px;       /* 按钮/输入框小圆角（user.css 现值） */
  --radius-md: 8px;       /* 按钮/弹窗（buy.css 现值） */
  --radius-lg: 10px;      /* 商品卡片（goods-item 现值，保留） */
  --radius-xl: 12px;      /* 大弹窗/layer */
  --radius-2xl: 24px;     /* promotion 海报/大圆角容器（新增） */
  --radius-pill: 9999px;  /* 胶囊（tag/pagination） */

  /* ========== 5. 阴影令牌 ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 26px rgba(25, 29, 38, 0.05);        /* goods-item 现值 */
  --shadow-card-hover: 0 18px 42px rgba(25, 29, 38, 0.12);  /* goods-item:hover 现值 */
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ========== 6. 断点令牌（文档约定，CSS 变量不能用于 @media） ==========
     统一为 3 个断点，废弃 1250/1053/1054/480/420/400/380/769/992 中的非标准值
     使用方式: @media (max-width: 768px) { ... } 对应 --bp-sm */
  --bp-xs: 480px;    /* 小屏手机（文档约定，仅用于注释/参考） */
  --bp-sm: 768px;    /* 移动端（主流，现 14 处使用） */
  --bp-md: 992px;    /* 平板/小 PC（detail.css 现值，保留） */
  --bp-lg: 1200px;   /* PC 容器宽度 */

  /* ========== 7. 容器令牌 ========== */
  --container-width: 1200px;
  --container-padding: 20px;

  /* ========== 8. 过渡令牌 ========== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========== 9. z-index 层级令牌 ========== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* z-index 扩展（阶段2新增：覆盖高位硬编码 998/999/99999 等） */
  --z-overlay: 800;           /* 遮罩层（原 998/999） */
  --z-max: 9999;              /* 最高层（原 99999/9998） */

  /* ========== 10. 旧变量名兼容层（login3.css 等引用旧名，渐进迁移期保留） ========== */
  --blue: var(--color-blue);          /* login3.css 旧变量名兼容 */
  --green: var(--color-green-accent);
  --gold: var(--color-warning);
  --primary-red: var(--color-primary);
}

/* ========== 基础 Reset（迁移自 index3.css 第 20-40 行） ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  background-color: var(--color-bg-card);
  overflow-x: hidden;
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  padding: 0;
}

.container {
  position: relative;
  padding: 0 var(--container-padding);
  margin: 0 auto;
  width: var(--container-width);
}

a {
  color: inherit;
  text-decoration: none;
}