/* CSS变量定义 - 主题系统 */

:root {
    /* 亮色主题 */
    --primary-color: #007AFF;
    --primary-hover: #0056CC;
    --primary-active: #004499;
    
    /* 背景色 */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F2F2F7;
    --bg-tertiary: #FFFFFF;
    --bg-overlay: rgba(0, 0, 0, 0.4);
    
    /* 文字色 */
    --text-primary: #000000;
    --text-secondary: #8E8E93;
    --text-tertiary: #C7C7CC;
    --text-inverse: #FFFFFF;
    
    /* 边框色 */
    --border-color: #C6C6C8;
    --border-light: #E5E5EA;
    --border-focus: var(--primary-color);
    
    /* 状态色 */
    --success-color: #34C759;
    --warning-color: #FF9500;
    --error-color: #FF3B30;
    --info-color: #5AC8FA;
    
    /* 阴影 */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* 圆角 */
    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-full: 50%;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* 字体大小 */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-xxl: 32px;
    
    /* 动画时长 */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    
    /* 动画缓动 */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

    /* 毛玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-backdrop: blur(20px);

    /* Z-index层级 */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}





/* 响应式断点 */
@media (max-width: 768px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --font-md: 14px;
        --font-lg: 16px;
        --font-xl: 20px;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 14px;
        --font-sm: 13px;
        --font-md: 14px;
        --font-lg: 15px;
    }
}