/* CSS Variables - Design Tokens */

:root {
    /* Colors - Primary */
    --color-primary: #667eea;
    --color-primary-hover: #5568d3;
    --color-primary-light: rgba(102, 126, 234, 0.1);
    
    /* Colors - Semantic */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-success-light: #d4edda;
    --color-success-dark: #155724;
    
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-danger-light: #f8d7da;
    --color-danger-dark: #721c24;
    --color-danger-border: #f5c6cb;
    
    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-warning-dark: #856404;
    
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    
    /* Colors - Trend */
    --color-trend-up: #ff0000;
    --color-trend-down: #00c853;
    --color-trend-stable: #9e9e9e;
    
    /* Colors - Text */
    --color-text: #1a1a1a;
    --color-text-primary: #212529;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    --color-text-light: #adb5bd;
    
    /* Colors - Background */
    --color-bg: white;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9ecef;
    
    /* Colors - Border */
    --color-border: #e9ecef;
    --color-border-light: #dee2e6;
    --color-border-medium: #d1d5db;
    
    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 48px;
    --spacing-5xl: 60px;
    
    /* Component Sizes */
    --panel-width: 440px;
    --panel-collapsed: 60px;
    --button-sm: 24px;
    --button-md: 32px;
    --button-lg: 40px;
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
    --icon-xl: 80px;
    
    /* Specific Sizes */
    --store-logo-sm: 28px;
    --store-logo-md: 40px;
    --store-logo-lg: 48px;
    --product-image: 50px;
    --product-col-width: 240px;
    --store-col-width: 110px;
    --table-min-width: 800px;
    --modal-max-width: 1200px;
    --login-box-width: 400px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 24px;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    --line-tight: 1.2;
    --line-normal: 1.4;
    --line-relaxed: 1.6;
    
    /* Transitions */
    --transition-base: all 0.2s ease;
    --transition-slow: all 0.3s ease;
    
    /* Z-index Layers */
    --z-base: 1;
    --z-sticky: 85;
    --z-sticky-category: 86;
    --z-sticky-header: 90;
    --z-sticky-column: 95;
    --z-dropdown: 100;
    --z-fixed: 1000;
    --z-tooltip: 9999;
    --z-modal: 10000;
    --z-modal-high: 99999;
}