/* ==========================================================================
   立体思维 - 心理咨询师工具平台 - 统一色彩系统
   基于色彩心理学，专为心理健康专业人士设计
   ========================================================================== */

:root {
    /* ==========================================================================
       主色系 - 专业蓝色 (信任、专业、冷静)
       ========================================================================== */
    --primary-blue: #4A90E2;           /* 主蓝色 - 专业可信 */
    --primary-blue-dark: #2C5282;      /* 深蓝色 - 权威稳重 */
    --primary-blue-light: #63B3ED;     /* 浅蓝色 - 友好亲和 */
    --primary-blue-lighter: #BEE3F8;   /* 更浅蓝 - 背景装饰 */
    --primary-blue-bg: #E6F3FF;        /* 蓝色背景 - 区域划分 */
    
    /* ==========================================================================
       辅助色系 - 治愈绿色 (成长、希望、治愈)
       ========================================================================== */
    --secondary-green: #68D391;        /* 主绿色 - 积极治愈 */
    --secondary-green-dark: #38A169;   /* 深绿色 - 稳定成长 */
    --secondary-green-light: #9AE6B4;  /* 浅绿色 - 温和希望 */
    --secondary-green-lighter: #C6F6D5; /* 更浅绿 - 背景装饰 */
    --secondary-green-bg: #F0FFF4;     /* 绿色背景 - 成功提示 */
    
    /* ==========================================================================
       中性色系 - 专业灰色 (平衡、专业、可读性)
       ========================================================================== */
    --neutral-dark: #2D3748;           /* 深灰 - 主要文字 */
    --neutral-medium: #4A5568;         /* 中深灰 - 次要文字 */
    --neutral-regular: #718096;        /* 常规灰 - 辅助文字 */
    --neutral-light: #A0AEC0;          /* 浅灰 - 占位文字 */
    --neutral-lighter: #CBD5E0;        /* 更浅灰 - 边框线条 */
    --neutral-bg: #F7FAFC;             /* 背景灰 - 页面背景 */
    --neutral-card: #FFFFFF;           /* 卡片白 - 内容背景 */
    
    /* ==========================================================================
       功能色系 - 状态反馈 (谨慎使用，保持专业)
       ========================================================================== */
    --success-color: var(--secondary-green);     /* 成功 - 使用治愈绿 */
    --success-bg: var(--secondary-green-bg);     /* 成功背景 */
    --warning-color: #D69E2E;                    /* 警告 - 温和橙色 */
    --warning-bg: #FFFAF0;                       /* 警告背景 */
    --error-color: #E53E3E;                      /* 错误 - 克制红色 */
    --error-bg: #FED7D7;                         /* 错误背景 */
    --info-color: var(--primary-blue);           /* 信息 - 使用主蓝色 */
    --info-bg: var(--primary-blue-bg);           /* 信息背景 */
    
    /* ==========================================================================
       交互状态 - 用户体验优化
       ========================================================================== */
    --hover-blue: #357ABD;              /* 蓝色悬停 */
    --active-blue: #2A5A8A;             /* 蓝色激活 */
    --hover-green: #2F855A;             /* 绿色悬停 */
    --active-green: #276749;            /* 绿色激活 */
    --focus-ring: rgba(74, 144, 226, 0.3); /* 焦点环 */
    
    /* ==========================================================================
       阴影系统 - 层次感和深度
       ========================================================================== */
    --shadow-xs: 0 1px 2px rgba(45, 55, 72, 0.05);
    --shadow-sm: 0 1px 3px rgba(45, 55, 72, 0.1);
    --shadow-md: 0 4px 6px rgba(45, 55, 72, 0.1);
    --shadow-lg: 0 10px 15px rgba(45, 55, 72, 0.1);
    --shadow-xl: 0 20px 25px rgba(45, 55, 72, 0.15);
    
    /* ==========================================================================
       边框和圆角 - 温和的视觉效果
       ========================================================================== */
    --border-color: var(--neutral-lighter);
    --border-color-light: #E2E8F0;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    
    /* ==========================================================================
       过渡动画 - 流畅的用户体验
       ========================================================================== */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-slow: all 0.3s ease;
    
    /* ==========================================================================
       字体大小和间距 - 易读性优化
       ========================================================================== */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    
    /* ==========================================================================
       特殊效果 - 品牌特色
       ========================================================================== */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-green) 0%, var(--secondary-green-dark) 100%);
    --gradient-neutral: linear-gradient(135deg, var(--neutral-regular) 0%, var(--neutral-dark) 100%);
    
    /* ==========================================================================
       暗色模式支持 (预留)
       ========================================================================== */
    --dark-bg: #1A202C;
    --dark-card: #2D3748;
    --dark-text: #F7FAFC;
    --dark-text-muted: #A0AEC0;
}

/* ==========================================================================
   色彩使用指南 (开发者注释)
   ========================================================================== */
/*
主色系使用场景：
- var(--primary-blue): 主要按钮、链接、品牌元素
- var(--primary-blue-dark): 悬停状态、重要标题
- var(--primary-blue-light): 次要按钮、标签
- var(--primary-blue-bg): 信息区域背景

辅助色系使用场景：
- var(--secondary-green): 成功状态、积极反馈
- var(--secondary-green-dark): 确认按钮、完成状态
- var(--secondary-green-bg): 成功消息背景

中性色系使用场景：
- var(--neutral-dark): 主标题、重要文字
- var(--neutral-medium): 副标题、导航文字
- var(--neutral-regular): 正文、说明文字
- var(--neutral-light): 占位符、辅助信息
- var(--neutral-bg): 页面背景
- var(--neutral-card): 卡片、表单背景

色彩心理学考虑：
1. 蓝色系 - 建立信任感和专业形象
2. 绿色系 - 传达治愈和成长的积极意义
3. 灰色系 - 保持中性和专业的平衡
4. 避免过于鲜艳的颜色，保持温和专业的氛围
*/