/**
 * vars.css — 全站 CSS 变量定义
 * 在所有 CSS 文件之前加载（紧跟 reset/normalize 之后）
 * 修改此文件即可统一调整全站配色、字号、圆角等
 */

:root {
    /* ===== 配色体系 ===== */

    /* 主题色（品牌蓝） */
    --color-primary:        #0099CC;
    --color-primary-light:  #28B5D6;
    --color-primary-dark:   #008FBF;
    --color-primary-accent: #00A2CA;

    /* 链接色 */
    --color-link:        #0066CC;
    --color-link-hover:  #E83A3D;

    /* 文字色 */
    --color-text:        #333333;
    --color-text-secondary: #666666;
    --color-text-tertiary:  #999999;
    --color-text-inverse:   #FFFFFF;

    /* 背景色 */
    --color-bg-page:      #FFFFFF;
    --color-bg-light:     #F7F7F7;
    --color-bg-soft:      #F8F8F8;
    --color-bg-header:    #F5F6FA;
    --color-bg-hover:     #F9F9FA;
    --color-bg-disabled:  #DDDDDD;

    /* 边框色 */
    --color-border:        #DDDDDD;
    --color-border-light:  #EEEEEE;
    --color-border-soft:   #E1E6EB;
    --color-border-dark:   #C1C1C1;

    /* 功能色 — 红色（错误/危险） */
    --color-danger:        #FF0000;
    --color-danger-bg:     #FFEFF0;
    --color-danger-border: #FFD7D7;
    --color-danger-text:   #EC514C;

    /* 功能色 — 绿色（成功） */
    --color-success:       #009900;
    --color-success-bg:    #F6FFEE;
    --color-success-border:#CDDDB9;

    /* 功能色 — 黄色（警告） */
    --color-warning-bg:    #FFFFE6;
    --color-warning-pink-bg: #FFEEEE;

    /* 其他常用色 */
    --color-orange:     #E7AD74;
    --color-red-accent: #E75A3D;
    --color-dark-gray:  #262626;
    --color-gray:       #CDCDCD;
    --color-light-gray: #E5E5E5;
    --color-f5:         #F5F5F5;
    --color-f1:         #F1F1F1;

    /* attention 背景色系 */
    --color-attention-pink-bg:    #FFEACC;
    --color-attention-pink-border:#FFE1B5;
    --color-attention-green-bg:   #EDFCF1;
    --color-attention-green-border:#E2FAE9;

    /* ===== 字体 ===== */

    /* 字体族 */
    --font-family-base:   "Microsoft YaHei", "微软雅黑", Verdana, Arial, sans-serif;
    --font-family-icon:   internal;

    /* 字号 */
    --font-size-base:     13px;
    --font-size-sm:       12px;
    --font-size-xs:       10px;
    --font-size-md:       14px;
    --font-size-lg:       16px;
    --font-size-xl:       18px;
    --font-size-xxl:     20px;

    /* 行高 */
    --line-height-base:   1.5em;

    /* ===== 圆角 ===== */

    --radius-sm:   1px;
    --radius-base: 2px;
    --radius-md:   3px;
    --radius-lg:   5px;
    --radius-xl:   10px;
    --radius-pill: 100px;
    --radius-circle: 50%;

    /* ===== 层级 z-index ===== */

    --z-dropdown:   1000;
    --z-sticky:     3000;
    --z-overlay:    9999;
    --z-modal:     10000;
    --z-toast:     10002;
    --z-top:      100000;
    --z-max:    1000000;

    /* ===== 过渡动画 ===== */

    --transition-fast:  all .1s ease;
    --transition-base:  all .2s ease-in-out;
    --transition-spin:  transform 0.5s;

    /* ===== 基础间距（可选，用于 padding/margin 统一） ===== */

    --space-xs:  3px;
    --space-sm:  5px;
    --space-md:  10px;
    --space-lg:  15px;
    --space-xl:  20px;
    --space-xxl: 30px;
}