:root {
    /* Colors */
    --primary-color: #31306A;
    --secondary-color: #F7C024;
    --background-color: #31306a58;
    --broken-blue-color: #e9ecef;
    --text-color: #364954;
    --white-color: #ffffff;
    --black-color: #000000;
    
    /* Additional Colors */
    --light-blue-bg: #f0f7ff;
    --light-blue-border: #e0f0ff;
    --blue-link: #0066cc;
    --blue-hover: #0052a3;
    --gray-text: #333333;
    --gray-light: #f8f9fa;
    --gray-border: #e9ecef;
    --gray-bg: #f9f9f9;
    --gray-muted: #999999;
    --error-color: #dc3545;
    --focus-outline: #4a90e2;
    
    /* Opacity Colors */
    --white-10: rgba(255, 255, 255, 0.1);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-80: rgba(255, 255, 255, 0.8);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-90: rgba(0, 0, 0, 0.9);
    
    /* Primary color variations using color-mix() */
    --primary-10: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --primary-20: color-mix(in srgb, var(--primary-color) 20%, transparent);
    --primary-30: color-mix(in srgb, var(--primary-color) 30%, transparent);
    --primary-40: color-mix(in srgb, var(--primary-color) 40%, transparent);
    --primary-80: color-mix(in srgb, var(--primary-color) 80%, transparent);
    
    /* Secondary color variations using color-mix() */
    --secondary-10: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    --secondary-20: color-mix(in srgb, var(--secondary-color) 20%, transparent);
    --secondary-30: color-mix(in srgb, var(--secondary-color) 30%, transparent);
    --secondary-40: color-mix(in srgb, var(--secondary-color) 40%, transparent);
    
    /* Typography */
    --font-family: 'GothamRounded', sans-serif;
    --heading-font: 'KGINeedAFont', sans-serif;
    --nova-sans-font: 'ST Nova Sans', sans-serif;
    --gotham-rounded-font: 'GothamRounded', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* Border & Shadows */
    --border-radius: 8px;
    --border-radius-lg: 16px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.5s ease;
    --transition-slow: 0.8s ease;
    
    /* Layout */
    --container-max-width: 1200px;
    --header-height: 100px;
    
    /* Z-index layers */
    --z-header: 1000;
    --z-modal: 2000;
}