:root {
    --color-primary-50: #98cff0;
    --primary-50: #98cff0;
    --color-primary-100: #7ec5f1;
    --primary-100: #7ec5f1;
    --color-primary-200: #4bb2f1;
    --primary-200: #4bb2f1;
    --color-primary-300: #1c9ded;
    --primary-300: #1c9ded;
    --color-primary-400: #1081c6;
    --primary-400: #1081c6;
    --color-primary-500: #0c6297;
    --primary-500: #0c6297;
    --color-primary-600: #05446b;
    --primary-600: #05446b;
    --color-primary-700: #01253c;
    --primary-700: #01253c;
    --color-primary-800: #00060a;
    --primary-800: #00060a;
    --color-primary-900: #000000;
    --primary-900: #000000;
    --color-secondary-50: #ffffff;
    --secondary-50: #ffffff;
    --color-secondary-100: #ffffff;
    --secondary-100: #ffffff;
    --color-secondary-200: #ecf1f8;
    --secondary-200: #ecf1f8;
    --color-secondary-300: #c5d6ec;
    --secondary-300: #c5d6ec;
    --color-secondary-400: #9fbbdf;
    --secondary-400: #9fbbdf;
    --color-secondary-500: #79a0d2;
    --secondary-500: #79a0d2;
    --color-secondary-600: #4d84cb;
    --secondary-600: #4d84cb;
    --color-secondary-700: #2e6ab7;
    --secondary-700: #2e6ab7;
    --color-secondary-800: #1f5293;
    --secondary-800: #1f5293;
    --color-secondary-900: #133a6c;
    --secondary-900: #133a6c;
}

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

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

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

.hover\:text-primary-600:hover { color: var(--color-primary-600) !important; }
.hover\:text-primary-700:hover { color: var(--color-primary-700) !important; }
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50) !important; }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100) !important; }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700) !important; }
.hover\:bg-primary-800:hover { background-color: var(--color-primary-800) !important; }

.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500) !important; }
.focus\:border-primary-500:focus { border-color: var(--color-primary-500) !important; }

/* secondary color utilities */
.text-secondary-50 { color: var(--color-secondary-50) !important; }
.text-secondary-100 { color: var(--color-secondary-100) !important; }
.text-secondary-200 { color: var(--color-secondary-200) !important; }
.text-secondary-300 { color: var(--color-secondary-300) !important; }
.text-secondary-400 { color: var(--color-secondary-400) !important; }
.text-secondary-500 { color: var(--color-secondary-500) !important; }
.text-secondary-600 { color: var(--color-secondary-600) !important; }
.text-secondary-700 { color: var(--color-secondary-700) !important; }
.text-secondary-800 { color: var(--color-secondary-800) !important; }
.text-secondary-900 { color: var(--color-secondary-900) !important; }

.bg-secondary-50 { background-color: var(--color-secondary-50) !important; }
.bg-secondary-100 { background-color: var(--color-secondary-100) !important; }
.bg-secondary-200 { background-color: var(--color-secondary-200) !important; }
.bg-secondary-300 { background-color: var(--color-secondary-300) !important; }
.bg-secondary-400 { background-color: var(--color-secondary-400) !important; }
.bg-secondary-500 { background-color: var(--color-secondary-500) !important; }
.bg-secondary-600 { background-color: var(--color-secondary-600) !important; }
.bg-secondary-700 { background-color: var(--color-secondary-700) !important; }
.bg-secondary-800 { background-color: var(--color-secondary-800) !important; }
.bg-secondary-900 { background-color: var(--color-secondary-900) !important; }

.border-secondary-50 { border-color: var(--color-secondary-50) !important; }
.border-secondary-100 { border-color: var(--color-secondary-100) !important; }
.border-secondary-200 { border-color: var(--color-secondary-200) !important; }
.border-secondary-300 { border-color: var(--color-secondary-300) !important; }
.border-secondary-400 { border-color: var(--color-secondary-400) !important; }
.border-secondary-500 { border-color: var(--color-secondary-500) !important; }
.border-secondary-600 { border-color: var(--color-secondary-600) !important; }
.border-secondary-700 { border-color: var(--color-secondary-700) !important; }
.border-secondary-800 { border-color: var(--color-secondary-800) !important; }
.border-secondary-900 { border-color: var(--color-secondary-900) !important; }

.hover\:text-secondary-600:hover { color: var(--color-secondary-600) !important; }
.hover\:text-secondary-700:hover { color: var(--color-secondary-700) !important; }
.hover\:bg-secondary-50:hover { background-color: var(--color-secondary-50) !important; }
.hover\:bg-secondary-100:hover { background-color: var(--color-secondary-100) !important; }
.hover\:bg-secondary-700:hover { background-color: var(--color-secondary-700) !important; }
.hover\:bg-secondary-800:hover { background-color: var(--color-secondary-800) !important; }

.focus\:ring-secondary-500:focus { --tw-ring-color: var(--color-secondary-500) !important; }
.focus\:border-secondary-500:focus { border-color: var(--color-secondary-500) !important; }