/**
 * CW保健品折扣速递 - 设计系统变量
 * 基于《全栈实现规范》定义
 * 版本: v1.0
 * 更新: 2026-05-11
 */

/* ============================================
   1. 颜色系统
   ============================================ */
:root {
  /* === 品牌主色（橙色系）=== */
  --color-primary: #FF6B35;           /* 橙色 — 折扣强调、主CTA按钮 */
  --color-primary-light: #FFF5F0;     /* 极浅橙 — Hero背景 */
  --color-primary-dark: #E55A2B;      /* 深橙 — 按钮 hover */
  --color-primary-rgb: 255, 107, 53;  /* 用于 rgba() */

  /* === 功能色（绿色系）=== */
  --color-success: #4CAF50;           /* 绿色 — 节省金额、成功状态 */
  --color-success-light: #E8F5E9;     /* 浅绿 — 节省标签背景 */
  --color-success-dark: #2E7D32;      /* 深绿 — 最低价标签文字 */

  /* === 折扣色 === */
  --color-discount: #FF6B35;          /* 橙色 — 折扣数字 */
  --color-hot: #FF4757;                /* 热点红 — 近30天最低标签 */

  /* === 状态色 === */
  --color-danger: #F44336;            /* 红色 — 危险/错误 */
  --color-warning: #FF9800;          /* 橙色 — 警告 */
  --color-info: #2196F3;              /* 蓝色 — 信息/购买按钮 */

  /* === 会员色 === */
  --color-l1-gold: #FFD700;           /* L1会员金 */

  /* === 背景色 === */
  --color-bg-page: #F5F5F5;          /* 页面整体背景 */
  --color-bg-card: #FFFFFF;          /* 卡片背景 */
  --color-bg-hero: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%); /* Hero区背景 */
  --color-bg-hover: #FAFAFA;         /* 卡片 hover 背景 */
  --color-bg-modal: rgba(0, 0, 0, 0.5); /* 弹窗遮罩 */

  /* === 文字色 === */
  --color-text-primary: #1A1A1A;      /* 主文字 */
  --color-text-secondary: #666666;    /* 次要文字 */
  --color-text-muted: #999999;        /* 辅助文字 */
  --color-text-disabled: #9E9E9E;     /* 禁用文字 */
  --color-text-white: #FFFFFF;        /* 反白文字 */

  /* === 边框色 === */
  --color-border: #E0E0E0;            /* 默认边框 */
  --color-border-light: #F0F0F0;     /* 浅边框 */
  --color-border-focus: var(--color-primary); /* 聚焦边框 */

  /* === 阴影 === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* === 兼容旧变量名（平滑过渡）=== */
  /* 主色调（向后兼容） */
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);

  /* 折扣色 */
  --discount: var(--color-discount);
  --discount-hot: var(--color-hot);
  --discount-alert: var(--color-warning);

  /* 功能色 */
  --success: var(--color-success);
  --info: var(--color-info);
  --danger: var(--color-danger);
  --warning: var(--color-warning);
  --l1-gold: var(--color-l1-gold);

  /* 中性色 */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-disabled: var(--color-text-disabled);
  --border-color: var(--color-border);
  --bg-page: var(--color-bg-page);
  --bg-card: var(--color-bg-card);
  --bg-header: var(--color-bg-hero);
}

/* ============================================
   2. 字体层级
   ============================================ */
:root {
  /* === 字号 === */
  --text-xs: 12px;           /* 辅助信息：标签、说明 */
  --text-sm: 14px;           /* 次要内容：原价、筛选标签 */
  --text-base: 16px;         /* 正文：商品名称、按钮 */
  --text-lg: 18px;           /* 强调正文：卡片价格 */
  --text-xl: 24px;          /* 小标题：现价 */
  --text-2xl: 32px;         /* 区块标题：Hero主标题 */
  --text-3xl: 40px;         /* 大标题 */
  --text-discount-hero: 56px;   /* 主推区折扣数字 */
  --text-discount-card: 20px;   /* 卡片折扣数字 */
  --text-discount-top: 32px;    /* Top3区域折扣数字 */

  /* === 字重 === */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* === 行高 === */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* === 兼容旧变量名 === */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
}

/* ============================================
   3. 间距系统（8px 基准网格）
   ============================================ */
:root {
  --space-0: 0;
  --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-12: 48px;    /* 区块分隔 */
  --space-16: 64px;    /* 页面级分隔 */

  /* === 兼容旧变量名 === */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-6);
  --space-2xl: var(--space-8);
}

/* ============================================
   4. 圆角系统
   ============================================ */
:root {
  --radius-sm: 6px;      /* 小元素：标签、徽章 */
  --radius-md: 8px;      /* 中元素：按钮、输入框 */
  --radius-lg: 12px;     /* 大元素：卡片 */
  --radius-xl: 16px;     /* 区块：主推商品容器 */
  --radius-full: 9999px; /* 圆形：筛选标签、胶囊按钮 */

  /* === 兼容旧变量名 === */
  --radius-0: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* ============================================
   5. 布局容器
   ============================================ */
:root {
  --container-max: 1200px;    /* 内容最大宽度 */
  --container-padding: 24px;  /* 两侧内边距 */
  --header-height: 64px;      /* 导航栏高度 */
  --header-height-mobile: 56px;
  --filter-height: 56px;      /* 筛选栏高度 */
}

/* ============================================
   6. 过渡动画
   ============================================ */
:root {
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* === 兼容旧变量名 === */
  --transition-fast: var(--transition-fast);
  --transition-normal: var(--transition-normal);
}

/* ============================================
   7. Z-Index 层级
   ============================================ */
:root {
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;
}

/* ============================================
   8. 安全区域（移动端适配）
   ============================================ */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}