/**
 * ============================================
 * 健身房管理系统小程序 - 全局配色变量
 * 主题：活力运动风格
 * 主色调：深蓝专业 + 活力橙热情
 * 兼容暗色/浅色模式基础，保证可访问性
 * ============================================
 */

:root {
    /* ========== 主品牌色 ========== */
    --primary-dark: #0B2B4B;      /* 深蓝主色 - 用于头部导航栏、重要按钮、品牌标识，体现专业信赖感 */
    --primary-deep: #1A4A6F;      /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
    --primary-light: #2C6288;     /* 浅蓝色（预留）- 用于选中态或辅助背景，保持和谐渐变 */
    
    /* ========== 强调/行动色 ========== */
    --accent-orange: #FF6B35;      /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */
    --accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */
    --accent-orange-dark: #E55A2B;  /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */
    
    /* ========== 背景色系 ========== */
    --bg-light: #F9FAFE;           /* 全局浅灰蓝背景 - 柔和且提升深蓝/橙色的视觉舒适度 */
    --bg-white: #FFFFFF;           /* 纯白卡片背景 - 用于内容卡片、表单区域，提高可读性与层次感 */
    --bg-gray: #F2F5F9;            /* 浅灰辅助背景 - 分割区域或禁用态背景 */
    
    /* ========== 文本色系 ========== */
    --text-dark: #1E2A3A;          /* 主要文字 - 标题、正文，保证高对比度 */
    --text-muted: #5E6F8D;         /* 辅助文字 - 次要信息、占位符，保持易读性 */
    --text-light: #8A99B4;         /* 更浅文字 - 提示语、时间戳，但需注意与背景对比 */
    --text-inverse: #FFFFFF;       /* 反白文字 - 深色/橙色背景上的文字 */
    
    /* ========== 边框/分割线 ========== */
    --border-light: #E9EDF2;       /* 浅边框 - 卡片分割、列表边界，细腻柔和 */
    --border-focus: #FF6B35;       /* 聚焦边框 - 输入框选中或强调区域，使用橙色点缀 */
    
    /* ========== 状态颜色（功能性） ========== */
    --success-green: #2ECC71;      /* 成功绿 - 已完成课程、健康打卡 */
    --warning-amber: #F39C12;      /* 警示橙黄 - 提醒、到期提示 */
    --error-red: #E74C3C;          /* 错误红 - 异常情况或取消预约 */
    --info-blue: #3498DB;          /* 信息蓝 - 提示气泡、帮助文字 */
    
    /* ========== 渐变色 (提升活力感) ========== */
    --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);   /* 橙色渐变 - 会员按钮、重要徽章 */
    --gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);     /* 深蓝渐变 - 头部banner或特别卡片 */
    --gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%);    /* 微弱渐变 - 增加细节精致度 */
    
    /* ========== 阴影层级 ========== */
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);   /* 卡片小阴影 轻量浮起 */
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);                                /* 中等阴影 - 弹窗或下拉菜单 */
    --shadow-lg: 0 20px 35px rgba(0, 0, 0, 0.12);                                /* 大阴影 - 模态框、悬浮元素 */
    --shadow-orange-glow: 0 4px 12px rgba(255, 107, 53, 0.25);                   /* 橙色光晕 - 增强CTA吸引力 */
    
    /* ========== 圆角规范 (柔和运动风) ========== */
    --radius-sm: 12px;             /* 小组件、标签圆角 */
    --radius-md: 20px;             /* 标准卡片圆角 */
    --radius-lg: 28px;             /* 大容器、头部卡片圆角 */
    --radius-full: 999px;          /* 胶囊按钮、头像完全圆角 */
    
    /* ========== 布局与间距 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* ========== 字体 (移动端优先) ========== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.7rem;        /* 辅助标注 */
    --font-size-sm: 0.8rem;        /* 次要文字 */
    --font-size-base: 0.9rem;      /* 正文基准 */
    --font-size-md: 1rem;          /* 小标题 */
    --font-size-lg: 1.2rem;        /* 卡片标题 */
    --font-size-xl: 1.4rem;        /* 大数字/欢迎语 */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* ========== 暗色模式适配（可选，保持品牌一致性） ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 暗色模式下微调背景与文字，保留品牌色核心 */
        --bg-light: #121826;
        --bg-white: #1E2636;
        --bg-gray: #0F141F;
        --text-dark: #EDF2F7;
        --text-muted: #9AA9C1;
        --border-light: #2A3346;
        --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4);
        /* 保留主色深蓝与橙色不变，但可适当提高对比 */
        --primary-dark: #123A5E;   /* 亮一点保证深色背景可见度 */
        --accent-orange: #FF7846;  /* 稍微提亮橙色 */
    }
}

/* ========== 辅助类 (方便开发直接复用) ========== */
.bg-primary {
    background-color: var(--primary-dark);
}
.bg-accent {
    background-color: var(--accent-orange);
}
.text-primary {
    color: var(--primary-dark);
}
.text-accent {
    color: var(--accent-orange);
}
.btn-orange {
    background: var(--gradient-orange);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-orange-glow);
    transition: all 0.2s ease;
}
.btn-orange:active {
    transform: scale(0.97);
    background: var(--accent-orange-dark);
}
.card-default {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    padding: var(--spacing-md);
}