/**
 * 喵呜小手机 - CSS变量定义
 * 所有主题颜色、尺寸、动画等变量集中管理
 */

:root {
    /* ========== 主题色 ========== */
    --theme-primary: #81c784;
    --theme-primary-hover: #66bb6a;
    --theme-primary-light: #c8e6c9;
    --theme-secondary: #aed581;
    --theme-accent: #4caf50;
    
    /* ========== 背景色 ========== */
    --background-start: #f1f8e9;
    --background-end: #ffffff;
    --background-gray: #f0f2f5;
    --card-background: rgba(255, 255, 255, 0.85);
    --card-background-solid: #ffffff;
    
    /* ========== 文字颜色 ========== */
    --text-primary: #212121;
    --text-dark: #424242;
    --text-gray: #757575;
    --text-light: #9e9e9e;
    --text-on-primary: #ffffff;
    --text-danger: #f44336;
    
    /* ========== 消息气泡 ========== */
    --sent-message-bg: #e6f5c9;
    --sent-message-text: #2e5a2f;
    --received-message-bg: #ffffff;
    --received-message-text: #333333;
    
    /* ========== 功能色 ========== */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-danger: #f44336;
    --color-info: #2196f3;
    --soft-red: #ff8a80;
    
    /* ========== 边框 ========== */
    --border-color: #e8e8e8;
    --border-light: #f0f0f0;
    --divider-color: rgba(0, 0, 0, 0.08);
    
    /* ========== 阴影 ========== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(129, 199, 132, 0.15);
    --shadow-lg: 0 8px 24px rgba(129, 199, 132, 0.2);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* ========== 圆角 ========== */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* ========== 间距 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    
    /* ========== 字体 ========== */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    
    /* ========== 动画 ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    
    /* ========== 层级 ========== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-lock-screen: 3000;
    
    /* ========== 尺寸 ========== */
    --header-height: 56px;
    --bottom-nav-height: 60px;
    --avatar-sm: 36px;
    --avatar-md: 50px;
    --avatar-lg: 80px;
    --avatar-xl: 100px;
    
    /* ========== 安全区域 ========== */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========== 深色主题 ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --background-start: #1a1a1a;
        --background-end: #2d2d2d;
        --background-gray: #242424;
        --card-background: rgba(45, 45, 45, 0.9);
        --card-background-solid: #2d2d2d;
        
        --text-primary: #e0e0e0;
        --text-dark: #d0d0d0;
        --text-gray: #9e9e9e;
        --text-light: #757575;
        
        --sent-message-bg: #2d5a30;
        --sent-message-text: #c8e6c9;
        --received-message-bg: #3d3d3d;
        --received-message-text: #e0e0e0;
        
        --border-color: #404040;
        --border-light: #333333;
        --divider-color: rgba(255, 255, 255, 0.08);
        
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}