/**
 * ============================================================
 * 健身房预约小程序 · 珊瑚橙配色方案 (CSS Variables)
 * ============================================================
 * 
 * 主题风格：珊瑚橙 (Coral Orange)
 * 主色：温暖珊瑚橙 + 柔和米白
 * 性格：亲切、阳光、活力、温暖
 * 适用场景：轻运动、瑜伽、女性友好、社区型健身房
 * 
 * 使用方式：在项目入口文件中引入本文件，或在 :root 中复制变量
 * 示例：color: var(--primary);  background: var(--bg-primary);
 * ============================================================
 */

:root {
    /* ==========================================================
       1. 品牌主色 (Primary) —— 珊瑚橙 / 暖橙渐变
       用于核心操作按钮、品牌高亮、渐变背景
       ========================================================== */
    
    /** 主色：温暖珊瑚橙，代表活力与亲切感 */
    --primary: #FF6B4A;
    
    /** 主色按压态：深橙，用于按钮点击反馈 */
    --primary-dark: #E55A3A;
    
    /** 主色浅色背景：半透明橙，用于标签、选中态背景 */
    --primary-light: rgba(255, 107, 74, 0.15);
    
    /** 主色渐变：珊瑚橙到浅橙红，用于导航栏、欢迎卡片、按钮 */
    --primary-gradient: linear-gradient(135deg, #FF6B4A, #FF8A65);
    
    /** 渐变辅助色：用于数据卡片或图表的渐变更丰富 */
    --primary-gradient-start: #FF6B4A;
    --primary-gradient-end: #FF8A65;

    /* ==========================================================
       2. 中性色 (Neutral) —— 暖色系/米白/暖灰
       用于背景、文字、分割线等基础界面
       ========================================================== */
    
    /** 暖棕黑：底部TabBar、导航栏背景、重要文字 */
    --secondary: #2D1F1A;
    
    /** 全局背景色：暖白米色，营造温馨舒适感 */
    --bg-primary: #FDF8F5;
    
    /** 纯白色：卡片、浮层、按钮文字 */
    --white: #FFFFFF;
    
    /** 暖棕黑：用于重要标题、用户名等主要文字 */
    --text-primary: #2D1F1A;
    
    /** 暖灰色：用于次要描述、场馆地址、日期等辅助文字 */
    --text-secondary: #8A7A72;
    
    /** 浅暖灰：用于禁用状态文字、占位符 */
    --text-disabled: #C5B5AD;
    
    /** 暖色分割线：用于列表、卡片分割 */
    --border-light: #F0E8E3;
    
    /** 卡片阴影：带有橙色调的轻度投影 */
    --shadow-card: 0 4px 16px rgba(255, 107, 74, 0.12);

    /* ==========================================================
       3. 功能色 (Functional) —— 反馈/状态/警告
       用于提示、错误、成功等交互反馈
       ========================================================== */
    
    /** 高亮警告红：未读消息红点、取消预约、危险操作 */
    --highlight: #FF4757;
    
    /** 成功状态：翠绿色，用于完成、通过等正向反馈 */
    --success: #2ED573;
    
    /** 警告状态：琥珀色，用于提醒、注意 */
    --warning: #FFA502;
    
    /** 信息状态：淡蓝色，用于一般提示 */
    --info: #4A90D9;
    
    /** 禁用/不可用状态：背景色和文字色 */
    --disabled-bg: #F0E8E3;
    --disabled-text: #C5B5AD;

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

    /* ==========================================================
       5. 额外辅助变量 (Extra Utilities)
       ========================================================== */
    
    /** 主色文字颜色 (通常为白色) */
    --primary-text-color: #FFFFFF;
    
    /** 渐变背景的文本颜色 (通常为白色) */
    --gradient-text-color: #FFFFFF;
    
    /** 卡片内边距 (统一) */
    --card-padding: 16px;
    
    /** 页面左右安全间距 */
    --page-padding: 16px;
    
    /** 字体家族 */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}