:root {
    --color-primary-50: #d8d6e9;
    --primary-50: #d8d6e9;
    --color-primary-100: #c7c3e2;
    --primary-100: #c7c3e2;
    --color-primary-200: #a49dd5;
    --primary-200: #a49dd5;
    --color-primary-300: #8379c6;
    --primary-300: #8379c6;
    --color-primary-400: #6255b7;
    --primary-400: #6255b7;
    --color-primary-500: #4c4198;
    --primary-500: #4c4198;
    --color-primary-600: #372e78;
    --primary-600: #372e78;
    --color-primary-700: #241d56;
    --primary-700: #241d56;
    --color-primary-800: #130e32;
    --primary-800: #130e32;
    --color-primary-900: #04030a;
    --primary-900: #04030a;
    --color-secondary-50: #f6cae5;
    --secondary-50: #f6cae5;
    --color-secondary-100: #f5b2da;
    --secondary-100: #f5b2da;
    --color-secondary-200: #f282c5;
    --secondary-200: #f282c5;
    --color-secondary-300: #ee53b0;
    --secondary-300: #ee53b0;
    --color-secondary-400: #e9259a;
    --secondary-400: #e9259a;
    --color-secondary-500: #c7147f;
    --secondary-500: #c7147f;
    --color-secondary-600: #9d0b62;
    --secondary-600: #9d0b62;
    --color-secondary-700: #700545;
    --secondary-700: #700545;
    --color-secondary-800: #410127;
    --secondary-800: #410127;
    --color-secondary-900: #0f0009;
    --secondary-900: #0f0009;
}

/* 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; }