/* CSS Variables - Design System */

:root {
    /* Blue Spectrum */
    --color-blue-100: #E6E6FF;
    --color-blue-200: #CCCCFF;
    --color-blue-300: #9999FF;
    --color-blue-400: #6666FF;
    --color-blue-500: #0000FF;
    --color-blue-600: #0000CC;
    --color-blue-700: #000099;
    --color-blue-800: #000066;
    --color-blue-900: #000033;
    
    /* Yellow Spectrum */
    --color-yellow-100: #FFF9E6;
    --color-yellow-200: #FFF3CC;
    --color-yellow-300: #FFE799;
    --color-yellow-400: #FFDB66;
    --color-yellow-500: #FFD700;
    --color-yellow-600: #FFB700;
    --color-yellow-700: #CC9200;
    --color-yellow-800: #996E00;
    --color-yellow-900: #664900;
    
    /* Gray Spectrum */
    --color-gray-100: #F5F5FA;
    --color-gray-200: #E8E8F0;
    --color-gray-300: #D1D1E6;
    --color-gray-400: #B5B5DB;
    --color-gray-500: #9A9AD1;
    --color-gray-600: #7B7BA7;
    --color-gray-700: #5C5C7D;
    --color-gray-800: #3E3E54;
    --color-gray-900: #1F1F2A;
    
    /* Semantic Colors */
    --color-primary: var(--color-blue-500);
    --color-secondary: var(--color-yellow-600);
    --color-accent: var(--color-yellow-500);
    
    /* Text Colors */
    --color-text-dark: #1a1a1a;
    --color-text-gray: #666666;
    --color-text-light: #FFFFFF;
    
    /* Background Colors */
    --color-background: #FFFFFF;
    --color-background-dark: #000000;
    --color-background-light: #F5F5F5;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --radius-2xl: 48px;
    --radius-full: 50px;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    
    /* Container Widths */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    
    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
}