/**
 * CSS Variables
 * 全局CSS变量定义
 */

:root {
    /* 主色调 */
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #60a5fa;
    --color-primary-bg: #eff6ff;
    
    /* 辅助色 */
    --color-success: #10b981;
    --color-success-bg: #ecfdf5;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-info: #6366f1;
    --color-info-bg: #eef2ff;
    
    /* 中性色 */
    --color-bg: #f8fafc;
    --color-bg-secondary: #f1f5f9;
    --color-bg-card: #ffffff;
    --color-text: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-light: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    
    /* 布局变量 */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --header-height: 64px;
    --footer-height: 48px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* 动画 */
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    
    /* z-index层级 */
    --z-sidebar: 100;
    --z-header: 90;
    --z-overlay: 80;
    --z-modal: 200;
    --z-toast: 300;
}

/* 暗色模式支持（可选） */
@media (prefers-color-scheme: dark) {
    :root {
        /* 可根据需要启用暗色模式变量 */
    }
}

/* 移动端适配 */
@media (max-width: 767px) {
    :root {
        --sidebar-width: 280px;
        --header-height: 56px;
    }
}

/* 平板适配 */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --sidebar-width: 200px;
        --header-height: 60px;
    }
}