/**
 * ============================================================
 * 健身房预约小程序 · 全局配色方案 (CSS Variables)
 * ============================================================
 * 
 * 主题风格：能量黑 + 荧光绿 + 科技灰
 * 适用场景：健身/运动/预约类小程序或移动端H5
 * 设计理念：硬核力量感 + 现代科技感 + 清晰易用
 * 
 * 使用方式：在项目入口文件中引入本文件，或在 :root 中复制变量
 * 示例：color: var(--primary);  background: var(--bg-primary);
 * ============================================================
 */

:root {
    /* ==========================================================
       1. 品牌主色 (Primary) —— 荧光绿 / 能量绿
       用于核心操作按钮、选中状态、品牌高亮
       ========================================================== */
    
    /** 主色：明亮荧光绿，代表活力与健康指标 */
    --primary: #00E676;
    
    /** 主色按压态：用于按钮点击、加载进度条等反馈 */
    --primary-dark: #00C853;
    
    /** 主色浅色背景：用于标签、选中态背景、轻量高亮 (半透明) */
    --primary-light: rgba(0, 230, 118, 0.15);
    
    /** 主色渐变终点：用于数据卡片、图表渐变的辅助色 (蓝绿) */
    --primary-gradient-end: #00BFA5;

    /* ==========================================================
       2. 中性色 (Neutral) —— 深色/灰色/白色
       用于背景、文字、分割线等基础界面
       ========================================================== */
    
    /** 深空黑：顶部导航、底部TabBar、卡片深色背景 */
    --secondary: #1A1A1A;
    
    /** 全局背景色：浅灰，使主色更突出，视觉干净 */
    --bg-primary: #F5F7FA;
    
    /** 纯白色：卡片、浮层、按钮文字 */
    --white: #FFFFFF;
    
    /** 深灰色：用于重要标题、用户名等主要文字 */
    --text-primary: #1E1E1E;
    
    /** 中灰色：用于次要描述、场馆地址、日期等辅助文字 */
    --text-secondary: #7A7E84;
    
    /** 浅灰色：用于禁用状态文字、占位符 */
    --text-disabled: #BDBDBD;
    
    /** 极浅灰：分割线、边框、轻量背景区分 */
    --border-light: #EEEEEE;
    
    /** 卡片阴影：轻度投影，提升层次感 */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* ==========================================================
       3. 功能色 (Functional) —— 反馈/状态/警告
       用于提示、错误、成功等交互反馈
       ========================================================== */
    
    /** 高亮警告红：未读消息红点、取消预约、倒计时、危险操作 */
    --highlight: #FF5252;
    
    /** 成功状态：通常复用主色，但独立定义便于统一调整 */
    --success: var(--primary);
    
    /** 禁用/不可用状态：背景色和文字色 */
    --disabled-bg: #E0E0E0;
    --disabled-text: #BDBDBD;

    /* ==========================================================
       4. 圆角 & 尺寸 (Radius & Size)
       便于统一界面风格
       ========================================================== */
    
    /** 大圆角：卡片、弹窗、主要容器 */
    --radius-large: 20px;
    
    /** 中圆角：按钮、输入框、次级卡片 */
    --radius-medium: 12px;
    
    /** 小圆角：标签、头像、小元素 */
    --radius-small: 8px;
    
    /** 全圆角：胶囊按钮、标签 */
    --radius-full: 40px;
    
    /** 底部TabBar高度 */
    --tab-height: 72px;
}