:root {
    --primary-50: #fdf2f8;
    --primary-100: #fce7f3;
    --primary-200: #fbcfe8;
    --primary-300: #f9a8d4;
    --primary-400: #f472b6;
    --primary-500: #ec4899;
    --primary-600: #db2777;
    --primary-700: #be185d;
    --primary-800: #9d174d;
    --primary-900: #831843;
}

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

.bg-primary {
    background-color: var(--primary-500);
}

.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);
}

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

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

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

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

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-primary-500 {
    --tw-gradient-from: var(--primary-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

.to-primary-600 {
    --tw-gradient-to: var(--primary-600);
}

.shadow-primary-500\/30 {
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3), 0 4px 6px -2px rgba(236, 72, 153, 0.3);
}

.shadow-primary-500\/40 {
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.4), 0 4px 6px -2px rgba(236, 72, 153, 0.4);
}

.hover\:bg-primary:hover {
    background-color: var(--primary-500);
}

.hover\:text-primary:hover {
    color: var(--primary-500);
}

.hover\:bg-primary-50:hover {
    background-color: var(--primary-50);
}

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

.focus\:border-primary-500:focus {
    border-color: var(--primary-500);
}