:root {
    --primary-color: #3B82F6;
    --secondary-color: #1E40AF;
    --accent-color: #06B6D4;
    --background-color: #FFFFFF;
    --text-color: #1F2937;
    
    /* Hero Overlay Variables */
    --overlay-color: #1E40AF;
    --overlay-rgb: 30, 64, 175;
    --overlay-opacity: 0.4;
    
    /* Additional derived colors */
    --primary-50: #f5f9ff;
    --primary-100: #ebf3fe;
    --primary-200: #d8e6fd;
    --primary-300: #b1cdfb;
    --primary-400: #76a8f9;
    --primary-500: #3B82F6;
    --primary-600: #3575dd;
    --primary-700: #2f68c5;
    --primary-800: #295bac;
    --primary-900: #234e94;
}


/* Theme-based utility classes */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }

.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-accent { border-color: var(--accent-color); }

/* Primary color variations */
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }