/* CSS Variables - Global Color Palette and Settings */
:root {
    /* Brand Colors */
    --primary-navy: #2E2E5A;
    --primary-purple: #4A4A8C;
    --accent-yellow: #F1C40F;
    --accent-orange: #FF8C42;
    --accent-blue: #5DADE2;
    
    /* Soft Background Colors */
    --soft-blue: #E8F4FD;
    --soft-purple: #F0F0F8;
    --soft-yellow: #FEF9E7;
    --soft-orange: #FFF4E6;
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --text-dark: #2C3E50;
    
    /* Shadows */
    --shadow-fun: 0 8px 25px rgba(241, 196, 15, 0.2);
    --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 15px 50px rgba(0, 0, 0, 0.12);
    
    /* Gradients */
    --gradient-fun: linear-gradient(135deg, #F1C40F 0%, #FF8C42 100%);
    --gradient-purple: linear-gradient(135deg, #4A4A8C 0%, #2E2E5A 100%);
    --gradient-soft: linear-gradient(135deg, #F8F9FA 0%, #E8F4FD 100%);
    
    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-fun: 'Comfortaa', cursive;
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 80px 0;
    --element-gap: 25px;
    
    /* Border Radius */
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 20px;
    --border-radius-pill: 25px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* Z-index */
    --z-header: 1000;
    --z-modal: 1010;
    --z-tooltip: 1020;
}