:root {
    /* New Color Palette */
    --primary-color: #024CAA; /* Bright blue - primary interactive elements */
    --secondary-color: #EC8305; /* Orange - accents and highlights */
    --dark-color: #091057; /* Navy blue - backgrounds, dark elements */
    --light-color: #DBD3D3; /* Light gray - backgrounds, neutral elements */
    
    /* Text colors */
    --dark-text: #091057; /* Navy for text */
    --light-text: #FFFFFF; /* White for text on dark backgrounds */
    --body-text: #333333; /* Slightly softened text for body content */
    
    /* Background colors */
    --background-color: #F8F9FA; /* Off-white for main background */
    --light-bg: #FFFFFF; /* White for cards and elements */
    --medium-bg: #DBD3D3; /* Light gray for secondary backgrounds */
    
    /* Gradient combinations */
    --gradient-primary: linear-gradient(135deg, #024CAA, #023A80); /* Blue gradient */
    --gradient-secondary: linear-gradient(135deg, #EC8305, #D27000); /* Orange gradient */
    --gradient-dark: linear-gradient(135deg, #091057, #060A38); /* Navy blue gradient */
    
    /* Spacing and styling */
    --border-radius: 10px; /* More rounded corners */
    --border-radius-sm: 6px; /* For smaller elements */
    --border-radius-lg: 16px; /* For larger sections */
    --box-shadow: 0 4px 12px rgba(9, 16, 87, 0.08); /* Subtle shadow */
    --box-shadow-hover: 0 8px 24px rgba(9, 16, 87, 0.15); /* Shadow on hover */
    --transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smoother transitions */
    --container-width: 1200px;
    --header-height: 80px;
    
    /* Content spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 64px;
}