/*
 * 文件名: variables.css
 * 描述: 定义网站全局CSS变量，用于统一设计风格和快速换肤
 * 风格: 现代专业、科技感
 */

:root {
    /* --- 颜色变量 --- */
    /* 主色: 工程蓝 */
    --color-primary: #1a4a7e; /* 深沉、专业的蓝 */
    --color-primary-light: #2b66a5; /* 稍亮的蓝，用于悬停 */
    --color-primary-dark: #0f2e4e; /* 更深的蓝，用于背景或阴影 */

    /* 辅色: 活力橙 */
    --color-accent: #ff6600; /* 活力、聚焦的橙 */
    --color-accent-light: #ff8533;
    --color-accent-dark: #cc5200;

    /* 基础色 */
    --color-white: #ffffff;
    --color-light-gray: #f8f8f8; /* 浅背景色 */
    --color-medium-gray: #cccccc; /* 边框线 */
    --color-dark-gray: #666666; /* 次要文字 */
    --color-black: #333333; /* 主要文字 */

    /* 状态色 */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;

    /* --- 字体变量 --- */
    --font-family-main: "PingFang SC", "Microsoft YaHei", "sans-serif";
    --font-family-heading: var(--font-family-main);
    --font-size-base: 16px;

    /* --- 间距变量 (基于8px网格) --- */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 64px;
    --spacing-xxl: 96px;

    /* --- 布局变量 --- */
    --container-max-width: 1280px;
    --header-height: 80px;

    /* --- 效果变量 --- */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}