/**
 * css/variables.css - CSS变量
 * 品牌色/状态色/灰度/间距/圆角/阴影/过渡/容器宽度
 * 
 * @package 青瓜CMS
 * @version V26.07.25
 */

:root {
    /* ========== 品牌色 ========== */
    --primary: #2ecc71;
    --primary-dark: #27ae60;
    --primary-light: #82e0aa;
    --primary-bg: #e8f8f0;
    --primary-rgb: 46, 204, 113;
    
    --secondary: #764ba2;
    --secondary-dark: #6d3b9e;
    --secondary-light: #8b5cf6;
    --secondary-bg: #f3e8ff;
    
    /* ========== 状态色 ========== */
    --success: #10b981;
    --success-bg: #d1fae5;
    --success-dark: #059669;
    --success-rgb: 16, 185, 129;
    
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-dark: #d97706;
    --warning-rgb: 245, 158, 11;
    
    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --danger-dark: #dc2626;
    --danger-rgb: 239, 68, 68;
    
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-dark: #2563eb;
    --info-rgb: 59, 130, 246;
    
    /* ========== 灰度 ========== */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --black: #000000;
    
    /* ========== 间距 ========== */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    
    /* ========== 圆角 ========== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ========== 阴影 ========== */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ========== 过渡 ========== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;
    
    /* ========== 容器宽度 ========== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* ========== 边框 ========== */
    --border-color: var(--gray-200);
    --border-width: 1px;
    --border-radius: var(--radius-md);
    
    /* ========== 字体 ========== */
    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Courier New', monospace;
    
    /* ========== 后台专用 ========== */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --header-height: 64px;
    --footer-height: 52px;
    
    /* ========== 字体大小 ========== */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* ========== 行高 ========== */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;
}