/* ===================== 全局色彩变量 - 学员学习端（清爽护眼版） ===================== */
:root {
    /* ------------ 主品牌色系 ------------ */
    --primary: #3B82F6;         /* 主按钮、导航高亮、重点图标 */
    --primary-dark: #2563EB;    /* 点击/深色按钮、头部强调 */
    --primary-light: #60A5FA;   /* hover悬浮、次要高亮 */
    --primary-bg: #EFF6FF;      /* 浅蓝底色：标签、卡片高亮块、输入框聚焦背景 */
    --primary-border: #BFDBFE;  /* 浅蓝边框：选中卡片、分割高亮 */

    /* ------------ 核心辅助色（学习完成/进度核心绿） ------------ */
    --success: #10B981;
    --success-dark: #059669;
    --success-light: #34D399;
    --success-bg: #ECFDF5;
    --success-border: #6EE7B7;

    /* ------------ 其他辅助点缀色（分区标签、活动区分，少量使用） ------------ */
    --purple: #8B5CF6;
    --purple-bg: #F5F3FF;
    --orange: #F97316;
    --orange-bg: #FFF7ED;
    --yellow: #EAB308;
    --yellow-bg: #FEFCE8;
    --pink: #F472B6;
    --pink-bg: #FDF2F8;

    /* ------------ 全局功能反馈色（统一提示） ------------ */
    --danger: #EF4444;    /* 错误、删除、考试超时 */
    --danger-bg: #FEF2F2;
    --warning: #F59E0B;   /* 待完成、限时提醒 */
    --warning-bg: #FFFBEB;
    --info: #0EA5E9;      /* 帮助、规则提示 */
    --info-bg: #F0F9FF;

    /* ------------ 中性灰度体系（文字/背景/分割，现代柔和不刺眼） ------------ */
    --text-title: #0F172A;     /* 大标题、页面主标题 */
    --text-subtitle: #334155;  /* 模块标题、卡片标题 */
    --text-body: #64748B;      /* 正文、课程简介、表单文字 */
    --text-placeholder: #94A3B8;/* 占位符、辅助小字、时间标签 */
    --line-light: #CBD5E1;     /* 输入框边框、分割细线、未激活图标 */
    --line-normal: #E2E8F0;    /* 卡片边框、模块分割线 */
    --bg-page: #F1F5F9;        /* 页面全局背景 */
    --bg-card: #F8FAFC;        /* 卡片、弹窗、列表底色（柔和替代纯白） */
    --bg-white: #FFFFFF;       /* 纯白，仅弹窗头部、纯白按钮使用 */

    /* ------------ 渐变配色（Banner、按钮、装饰卡片） ------------ */
    --grad-primary: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    --grad-success: linear-gradient(135deg, #059669 0%, #34D399 100%);
    --grad-purple: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
    --grad-mute: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);

    /* ------------ 统一阴影规范 ------------ */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);    /* 常规课程卡片 */
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.1);   /* hover悬浮、下拉菜单 */
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.12);/* 弹窗、浮层、大Banner */
}

/* ===================== 深色模式适配（学员夜间学习模式） ===================== */
@media (prefers-color-scheme: dark) {
    :root {
        --text-title: #F8FAFC;
        --text-subtitle: #CBD5E1;
        --text-body: #94A3B8;
        --text-placeholder: #64748B;
        --line-light: #334155;
        --line-normal: #1E293B;
        --bg-page: #0F172A;
        --bg-card: #1E293B;
        --bg-white: #334155;
    }
}

/* ===================== 通用基础组件默认配色示例（直接使用） ===================== */
/* 主按钮 */
.btn-primary {
    background: var(--primary);
    color: var(--bg-white);
    border: none;
}
.btn-primary:hover {
    background: var(--primary-light);
}
.btn-primary:active {
    background: var(--primary-dark);
}

/* 成功按钮（完成学习、提交作业） */
.btn-success {
    background: var(--success);
    color: #fff;
}
.btn-success:hover {
    background: var(--success-light);
}

/* 文字链接 */
.link {
    color: var(--primary);
}
.link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* 课程卡片基础 */
.card {
    background: var(--bg-card);
    border: 1px solid var(--line-normal);
    box-shadow: var(--shadow-sm);
    border-radius: 12px;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}

/* 标签组件 */
.tag-primary {
    background: var(--primary-bg);
    color: var(--primary-dark);
    padding: 4px 10px;
    border-radius: 6px;
}
.tag-success {
    background: var(--success-bg);
    color: var(--success-dark);
}

/* 输入框 */
.input {
    background: var(--bg-white);
    border: 1px solid var(--line-light);
    color: var(--text-body);
}
.input:focus {
    border-color: var(--primary);
    background: var(--primary-bg);
    outline: none;
}

/* 提示消息块 */
.tip-info {
    background: var(--info-bg);
    border-left: 4px solid var(--info);
    color: var(--text-subtitle);
}
.tip-success {
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}
.tip-warning {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
}
.tip-danger {
    background: var(--danger-bg);
    border-left: 4px solid var(--danger);
}