:root {
    /* Primary Colors */
    --color-primary: #2262A2;
    --color-primary-dark: #1A4D7F;
    --color-primary-light: #2E7BC5;
    --color-primary-rgb: 34, 98, 162;
    
    /* Secondary Colors */
    --color-secondary: #20B2AA;
    --color-secondary-dark: #1A8B85;
    --color-secondary-light: #4ECDC4;
    --color-secondary-rgb: 32, 178, 170;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-black-rgb: 0, 0, 0;
    
    /* Text Colors */
    --color-text-primary: var(--color-primary);
    --color-text-secondary: var(--color-gray-600);
    --color-text-light: var(--color-gray-300);
    --color-text-white: var(--color-white);
    
    /* Background Colors */
    --color-bg-primary: var(--color-primary);
    --color-bg-primary-dark: var(--color-primary-dark);
    --color-bg-secondary: var(--color-secondary);
    --color-bg-white: var(--color-white);
    --color-bg-gray-50: var(--color-gray-50);
    
    /* RGBA Colors - Using color-mix for modern browsers, fallback for older */
    --color-primary-95: rgba(34, 98, 162, 0.95);
    --color-primary-10: rgba(34, 98, 162, 0.1);
    --color-secondary-30: rgba(32, 178, 170, 0.3);
    --color-secondary-50: rgba(32, 178, 170, 0.5);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-30: rgba(0, 0, 0, 0.3);
}