:root {
    /* 主题色 */
    --primary-color: #667eea;
    --primary-light: #7c94f4;
    --primary-dark: #5a6fd6;
    --secondary-color: #764ba2;
    
    /* 渐变 */
    --gradient-primary: #1a1a1a;
    --gradient-header: #ffffff;
    --gradient-bubble-self: #1a1a1a;
    
    /* 背景色 */
    --bg-primary: #f7f8fc;
    --bg-secondary: #ffffff;
    --bg-chat: #e8ecf3;
    --bg-input: #ffffff;
    --bg-modal: rgba(0, 0, 0, 0.5);
    
    /* 文字颜色 */
    --text-primary: #1a1a2e;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;
    --text-bubble-self: #ffffff;
    --text-bubble-other: #1a1a2e;
    
    /* 气泡颜色 */
    --bubble-self-bg: #1a1a1a;
    --bubble-other-bg: #ffffff;
    --bubble-self-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    --bubble-other-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    
    /* 边框 */
    --border-color: #e5e7eb;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
    
    /* 气泡圆角 */
    --bubble-radius-self: 20px 20px 4px 20px;
    --bubble-radius-other: 20px 20px 20px 4px;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* 安全区域 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    
    /* 头部高度 */
    --header-height: 60px;
    --nav-height: 70px;
    
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
}

/* 暗色主题 */
[data-theme="dark"] {
    --bg-primary: #0f0f23;
    --bg-secondary: #1a1a2e;
    --bg-chat: #16162a;
    --bg-input: #252542;
    
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-light: #6b6b80;
    --text-bubble-other: #ffffff;
    
    --bubble-other-bg: #252542;
    --bubble-other-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    
    --border-color: #2d2d4a;
}