/* ============================================================
 * 全城妙秒找 - 设计令牌（H5 后台专用 / CSS 变量版）
 * 创建：2026-10-10 / L2-2 视觉令牌
 *
 * 与小程序端的区别：
 *   - 小程序端 wxss 不支持 CSS 变量，所以用语义类名（atoms）
 *   - H5 端用 CSS 变量（更标准、消费顺序变更更快）
 *   - 调色板与小程序端对齐（共 8 主色 + 7 角色色 + 8 中性色阶）
 *
 * 使用方法：HTML <head> 引入本文件
 *   <link rel="stylesheet" href="design-tokens.css">
 * ============================================================ */

:root {
  /* ===== 1. 品牌色 ===== */
  --brand-primary: #00a854;          /* 绿 - 后台主色 */
  --brand-primary-dark: #008a44;     /* 绿深 - hover/激活 */
  --brand-primary-soft: #f0faf4;     /* 绿软 - 背景块 */
  --brand-secondary: #00c853;        /* 浅绿 - 链接/渐变 */
  --brand-orange: #ff7a45;
  --brand-orange-soft: #fff3ec;
  --brand-blue: #2d8cf0;
  --brand-blue-soft: #f0f7ff;

  /* ===== 2. 状态色（统一收敛） ===== */
  --success: #07c160;
  --success-soft: #e8f5e9;
  --success-text: #2e7d32;

  --warning: #fa8c16;
  --warning-soft: #fff7e6;
  --warning-text: #d46b08;

  --error: #e64340;
  --error-soft: #fef1f1;
  --error-text: #cf1322;

  --info: #1677ff;
  --info-soft: #e6f7ff;
  --info-text: #1677ff;

  /* ===== 3. 中性色阶 ===== */
  --text-primary: #333;
  --text-secondary: #666;
  --text-tertiary: #8c8c8c;          /* 辅助 */
  --text-disabled: #ccc;
  --text-placeholder: #bbb;

  --bg-page: #f5f6f8;
  --bg-elevated: #fff;
  --bg-hover: #f0f0f0;
  --bg-mask: rgba(0, 0, 0, 0.5);

  --line-light: #f0f0f0;
  --line-default: #e8e8e8;           /* 分割线 */
  --line-strong: #ddd;

  /* ===== 4. 角色色（7 种用户身份 - 与小程序端对齐） ===== */
  --role-merchant: #ff6b35;
  --role-worker: #667eea;
  --role-factory: #5c6bc0;
  --role-coop: #07c160;
  --role-company: #764ba2;
  --role-staff: #1890ff;
  --role-partner: #00bcd4;

  /* ===== 5. 角标/标签专用 ===== */
  --badge-top: #ff4d4f;
  --badge-ad: #ff9800;
  --badge-credit: #ffd700;
  --badge-vip: linear-gradient(135deg, #ffd700, #fa8c16);

  /* ===== 6. 字号（11 档） ===== */
  --fs-xs: 11px;       /* 极小 */
  --fs-sm: 12px;       /* 小标签 */
  --fs-base: 13px;     /* 正文 base（H5 默认） */
  --fs-md: 14px;       /* 主文字 */
  --fs-lg: 15px;       /* 卡片标题 */
  --fs-xl: 16px;       /* 区块标题 */
  --fs-xl2: 18px;      /* 弹窗标题 */
  --fs-xl3: 20px;      /* 大标题 */
  --fs-display: 24px;  /* 大数字 */
  --fs-hero: 32px;     /* 登录页 */
  --fs-mega: 40px;     /* 超大 */

  /* ===== 7. 字重 ===== */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===== 8. 行高 ===== */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.8;

  /* ===== 9. 间距（8 档） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-15: 60px;

  /* ===== 10. 圆角（5 档） ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== 11. 阴影（3 档） ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ===== 12. 动效 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ===== 13. 兼容旧变量别名（H5 旧代码仍用 --g/--r/--o/--b/--gray 等） ===== */
  --g: var(--brand-primary);
  --gd: var(--brand-primary-dark);
  --gbg: var(--brand-primary-soft);
  --r: var(--error);
  --rbg: var(--error-soft);
  --o: var(--brand-orange);
  --obg: var(--brand-orange-soft);
  --b: var(--brand-blue);
  --bbg: var(--brand-blue-soft);
  --gray: var(--text-tertiary);
  --line: var(--line-default);
  --txt: var(--text-primary);
  --bg: var(--bg-page);
}