/* =========================================
   CSS Variables & Root Settings - 紫白双色极简风格
   ========================================= */
:root {
    /* 极简双色系统 - 紫色与白色 */
    --bg-color: #FFFFFF;                    /* 纯白背景 */
    --bg-chat: #FFFFFF;                     /* 聊天区域背景 */
    --white: #FFFFFF;                       /* 纯白 */
    --text-main: #2D2B3A;                   /* 深紫灰主文字 */
    --text-sub: #8B87A3;                    /* 柔和次级文字 */
    --text-time: #B0ADBE;                   /* 时间戳文字 */
    --text-placeholder: #C5C3D0;            /* 占位符文字 */
    
    /* 主题色 - 紫色系 (默认) */
    --primary-color: #A78BFA;               /* 主紫色 */
    --primary-dark: #8B5CF6;                /* 深紫 */
    --primary-light: #DDD6FE;               /* 浅紫 */
    --primary-ultra-light: #F3F0FF;         /* 极浅紫 */
    --primary-gradient: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    --primary-color-rgb: 167, 139, 250;
    
    /* 气泡颜色 - 紫白配色 */
    --user-bubble-bg: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    --user-bubble-text: #FFFFFF;            /* 用户气泡文字 - 白色 */
    --ai-bubble-bg: #FFFFFF;                /* AI气泡 - 纯白 */
    --ai-bubble-text: #2D2B3A;              /* AI气泡文字 */
    --ai-bubble-shadow: rgba(139, 92, 246, 0.08);
    
    /* 顶部/底部栏 */
    --header-bg: rgba(255, 255, 255, 0.3);
    --footer-bg: rgba(255, 255, 255, 0.3);
    --bar-border: rgba(167, 139, 250, 0.08);
    
    /* 图标颜色 */
    --icon-default: #B0ADBE;                /* 默认图标色 */
    --icon-active: #A78BFA;                 /* 激活图标色 */
    
    /* 状态色 - 紫色系变体 */
    --online-color: #A78BFA;                /* 在线状态 - 紫色 */
    --danger: #EF4444;                      /* 危险色 - 红 */
    --warning: #F59E0B;                     /* 警告色 - 橙 */
    --success: #10B981;                     /* 成功色 - 绿 */
    
    /* 布局尺寸 */
    --header-height: 56px;
    --footer-height: 56px;
    --nav-height: 64px;
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 
                   'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    
    /* 圆角设计 */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    /* 柔和阴影 - 紫色调 */
    --shadow-xs: 0 1px 2px rgba(139, 92, 246, 0.04);
    --shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.06);
    --shadow-md: 0 4px 16px rgba(139, 92, 246, 0.08);
    --shadow-lg: 0 8px 24px rgba(139, 92, 246, 0.10);
    --shadow-float: 0 12px 32px rgba(139, 92, 246, 0.12);
    --shadow-bubble: 0 2px 12px rgba(139, 92, 246, 0.06);
    --shadow-purple: 0 4px 20px rgba(139, 92, 246, 0.20);
    
    /* 间距系统 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    
    /* 过渡动画 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* 触控区域 */
    --touch-target: 44px;
}

/* 深色模式 - 紫白配色 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #16141D;
        --bg-chat: #1C1A24;
        --white: #242230;
        --text-main: #F0EEF5;
        --text-sub: #8B87A3;
        --header-bg: rgba(22, 20, 29, 0.95);
        --footer-bg: rgba(22, 20, 29, 0.98);
        --ai-bubble-bg: #2A2838;
        --user-bubble-bg: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    }
}