/* ============================================================
 * 设计变量（Design Tokens）— 样式体系重构第一期
 * 创建于 2026-08-06，基于全站 CSS 实际使用频次统计收敛
 * 原则：本文件只定义变量与通用工具类，不改变任何现有样式
 * 后续重构：新样式一律使用变量；旧样式逐文件迁移替换
 * ============================================================ */

:root {
    /* ---------- 品牌色（取自全站使用频次最高值） ---------- */
    --color-primary:        #0066b3;   /* 主蓝，全站 118 处 */
    --color-primary-dark:   #005091;   /* 主蓝加深（hover/active） */
    --color-primary-light:  #e8f1f8;   /* 主蓝浅底（背景块） */
    --color-accent:         #fa991b;   /* 橙，全站 48 处（促销/高亮） */
    --color-danger:         #e53e40;   /* 红，全站 48 处（价格/警示） */
    --color-red:            #e60012;   /* 移动品牌红，23 处（Logo 区/角标） */

    /* ---------- 中性色 ---------- */
    --color-text:           #333333;   /* 正文主色 */
    --color-text-secondary: #666666;   /* 次级文字 */
    --color-text-muted:     #999999;   /* 弱化文字/提示 */
    --color-border:         #e5e5e5;   /* 常规边框 */
    --color-border-dark:    #dddddd;   /* 深边框 */
    --color-bg:             #f5f5f5;   /* 页面灰底 */
    --color-bg-light:       #eeeeee;   /* 浅灰底 */
    --color-white:          #ffffff;
    --color-black:          #000000;

    /* ---------- 间距阶梯（混合制：8px 基准 + 全站实测 5px 节奏） ----------
     * 全站统计主流值 10px(331处)/20px(225处)/15px(152处)/5px(116处)，
     * 故阶梯保留 10/20/30/40 档位，主流值零改动，离群值就近归并(±1px级)
     * 用法：padding/margin/gap 一律取阶梯值 */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  10px;
    --space-4:  12px;
    --space-5:  16px;
    --space-6:  20px;
    --space-7:  24px;
    --space-8:  30px;
    --space-9:  40px;
    --space-10: 48px;
    --space-11: 64px;

    /* ---------- 字号阶梯（px，全站统计收敛） ---------- */
    --font-xs:   12px;   /* 辅助说明 */
    --font-sm:   14px;   /* 次级正文 */
    --font-base: 16px;   /* 正文基准（全站 104 处） */
    --font-lg:   18px;   /* 小标题 */
    --font-xl:   20px;   /* 卡片标题 */
    --font-2xl:  22px;   /* 区块标题 */
    --font-3xl:  24px;   /* 大标题 */
    --font-4xl:  30px;   /* 页面主标题 */

    /* ---------- 行高 ---------- */
    --leading-tight:  1.3;   /* 标题 */
    --leading-normal: 1.6;   /* 正文 */
    --leading-loose:  1.8;   /* 长文阅读 */

    /* ---------- 圆角 ---------- */
    --radius-sm:   2px;
    --radius:      4px;
    --radius-lg:   8px;
    --radius-full: 999px;

    /* ---------- 阴影 ---------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .10);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);

    /* ---------- 版心 ----------
     * 现状有 6 套（1200/1198/1170/1158/1210/Bootstrap），统一为 1200 */
    --container-width: 1200px;
    --container-padding: 15px;   /* 窄屏时左右留白 */

    /* ---------- z-index 阶梯 ----------
     * 现状最高 999999999（loading 遮罩），统一收敛 */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-modal:    1000;
    --z-toast:    1100;
    --z-loading:  1200;   /* 全屏 loading 遮罩原 999999999 → 1200 */

    /* ---------- 过渡 ---------- */
    --transition: all .3s ease;
}

/* ============================================================
 * 标准响应式断点（CSS 变量无法用于 @media，此处仅作规范记录）
 * 采用 Bootstrap 式配对约定（max 与 min 不重叠）：
 *   小手机: max-width 480px
 *   手机  : max-width 600px
 *   平板  : max-width 767px  /  min-width 768px
 *   小桌面: max-width 991px  /  min-width 992px
 *   版心  : max-width 1199px /  min-width 1200px（--container-width）
 * 已归并：575→600、750/768/800→767、900/1000/1024→991、1229/1230→1199/1200
 * 保留特例：max-360（超小屏）、min-1450（大屏增强）、带 orientation 的复合查询
 * ============================================================ */

/* ---------- 通用工具类 ---------- */

/* 清浮动：修复原 .clearfix 被注释失效、靠全局 ul:after 兜底的问题 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

/* 标准版心容器（迁移期新代码使用，旧类名暂不动） */
.container-std {
    width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) {
    .container-std {
        width: 100%;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}