/* ===== 基础样式重置和全局变量定义 ===== */

/* 全局样式重置：移除所有元素的默认边距和内边距，使用border-box盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保元素的宽度和高度包含边框和内边距 */
}

/* CSS自定义属性（变量）定义：集中管理设计系统中的颜色和渐变 */
:root {
    /* 主色调：紫色系 */
    --primary-color: #6366f1;      /* 主色：靛蓝色 */
    --secondary-color: #8b5cf6;    /* 辅色：紫罗兰色 */
    --accent-color: #f59e0b;       /* 强调色：琥珀色 */
    
    /* 深色背景色系：适合暗色主题 */
    --dark-bg: #0f0f1a;           /* 深色背景：接近黑色的深蓝 */
    --dark-card: #1a1a2e;         /* 深色卡片背景：稍亮的深蓝 */
    --dark-card-hover: #252542;   /* 深色卡片悬停状态：更亮的深蓝 */
    
    /* 文本颜色 */
    --text-primary: #ffffff;      /* 主要文本颜色：白色 */
    --text-secondary: #a0a0b0;   /* 次要文本颜色：浅灰色 */
    
    /* 渐变背景 */
    --gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* 主渐变：靛蓝到紫罗兰 */
    --gradient-2: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); /* 强调渐变：琥珀色到红色 */
}

/* 全局body样式：设置基础字体、背景和文本样式 */
body {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 中文字体优先：微软雅黑、苹方，最后通用无衬线字体 */
    background: var(--dark-bg);      /* 使用深色背景变量 */
    color: var(--text-primary);     /* 使用主要文本颜色 */
    overflow-x: hidden;             /* 隐藏水平滚动条 */
    line-height: 1.6;               /* 设置行高为1.6倍，提高可读性 */
}