/* CSS Custom Properties (Variables) */
:root {
    /* Primary Colors */
    --color-primary: #00ff88;
    --color-primary-dark: #00cc66;
    --color-primary-light: #33ffaa;
    
    /* Primary RGBA Colors */
    --color-primary-rgba-10: rgba(0, 255, 136, 0.1);
    --color-primary-rgba-12: rgba(0, 255, 136, 0.12);
    --color-primary-rgba-20: rgba(0, 255, 136, 0.2);
    --color-primary-rgba-25: rgba(0, 255, 136, 0.25);
    --color-primary-rgba-30: rgba(0, 255, 136, 0.3);
    --color-primary-rgba-35: rgba(0, 255, 136, 0.35);
    --color-primary-rgba-40: rgba(0, 255, 136, 0.4);
    --color-primary-rgba-50: rgba(0, 255, 136, 0.5);
    --color-primary-rgba-60: rgba(0, 255, 136, 0.6);
    
    /* Error Colors */
    --color-error: #ff6666;
    --color-error-dark: #ff4444;
    
    /* Spacing */
    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 12px;
    --spacing-lg: 18px;
    --spacing-xl: 24px;
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* Z-index Scale */
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal-backdrop: 400;
    --z-index-modal: 500;
    --z-index-popover: 600;
    --z-index-tooltip: 700;
    --z-index-max: 1000;
}