:root {
    --brand-shell-bg: #eff7f7;
    --brand-gradient-start: #dff4f2;
    --brand-gradient-end: #d4eef0;
    --brand-primary-50: #ecfeff;
    --brand-primary-100: #cffafe;
    --brand-primary-200: #a5f3fc;
    --brand-primary-400: #22d3ee;
    --brand-primary-500: #06b6d4;
    --brand-primary-600: #0891b2;
    --brand-primary-700: #0e7490;
    --brand-primary-800: #155e75;
}

.text-purple-400 {
    color: var(--brand-primary-400) !important;
}

.text-purple-600,
.hover\:text-purple-600:hover {
    color: var(--brand-primary-600) !important;
}

.text-purple-700,
.hover\:text-purple-700:hover {
    color: var(--brand-primary-700) !important;
}

.bg-purple-50,
.hover\:bg-purple-50:hover {
    background-color: var(--brand-primary-50) !important;
}

.bg-purple-600 {
    background-color: var(--brand-primary-600) !important;
}

.bg-purple-700,
.hover\:bg-purple-700:hover {
    background-color: var(--brand-primary-700) !important;
}

.hover\:bg-purple-800:hover {
    background-color: var(--brand-primary-800) !important;
}

.border-purple-100 {
    border-color: var(--brand-primary-100) !important;
}

.border-purple-200 {
    border-color: var(--brand-primary-200) !important;
}

.border-purple-400,
.focus-within\:border-purple-400:focus-within {
    border-color: var(--brand-primary-400) !important;
}

.border-purple-500,
.focus\:border-purple-500:focus {
    border-color: var(--brand-primary-500) !important;
}

.hover\:border-purple-600:hover {
    border-color: var(--brand-primary-600) !important;
}

.ring-purple-50 {
    --tw-ring-color: var(--brand-primary-50) !important;
}

.ring-purple-500 {
    --tw-ring-color: var(--brand-primary-500) !important;
}

.focus-within\:ring-purple-400:focus-within {
    --tw-ring-color: var(--brand-primary-400) !important;
    box-shadow: 0 0 0 1px var(--brand-primary-400) !important;
}

.group:focus-within .group-focus-within\:text-purple-600 {
    color: var(--brand-primary-600) !important;
}