/* CSS Custom Properties (Design Tokens) */

:root {
    /* Colors */
    --color-primary: #0c55c2;
    --color-secondary: #0ba265;
    --color-dark: #2d3748;
    --color-text: #4a5568;
    --color-white: #ffffff;
    --color-heading: #1a202c;
    --color-muted: #718096;
    --color-error: #e53e3e;
    --color-error-dark: #c53030;
    
    /* Component-specific colors */
    --color-purple-light: #9f7aea;
    --color-purple-dark: #805ad5;
    --color-teal-light: #38b2ac;
    --color-teal-dark: #319795;
    --color-blue-light: #4299e1;
    --color-blue-dark: #3182ce;
    --color-green-light: #48bb78;
    --color-green-dark: #38a169;
    --color-orange-light: #ed8936;
    --color-orange-dark: #dd6b20;
    --color-yellow-light: #f6ad55;
    --color-yellow-dark: #ecc94b;
    --color-gray-light: #4a5568;
    --color-gray-dark: #2d3748;
    
    /* Gradients */
    --gradient-primary: linear-gradient(45deg, #0c55c2, #0ba265);
    --gradient-bg: linear-gradient(135deg, #0c55c2 0%, #0ba265 100%);
    --gradient-blue: linear-gradient(135deg, #7aa7c5 0%, #274e75 100%);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 50px;
    
    /* Breakpoints */
    --breakpoint-mobile: 600px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1050px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 10px 30px rgba(12, 85, 194, 0.3);
    
    /* Z-index */
    --z-base: 1;
    --z-nav: 1000;
    --z-nav-menu: 1001;
    --z-hamburger: 1100;
    --z-modal: 2000;
}