.bg-primary-50 {
    background-color: hsl(33, 100%, 96%);
}
.bg-primary-100 {
    background-color: hsl(34, 100%, 92%);
}
.bg-primary-200 {
    background-color: hsl(32, 98%, 83%);
}
.bg-primary-300 {
    background-color: hsl(31, 97%, 72%);
}
.bg-primary-400 {
    background-color: hsl(27, 96%, 61%);
}
.bg-primary-500 {
    background-color: hsl(25, 95%, 53%);
}
.bg-primary-600 {
    background-color: hsl(21, 90%, 48%);
}
.bg-primary-700 {
    background-color: hsl(17, 88%, 40%);
}
.bg-primary-800 {
    background-color: hsl(15, 79%, 34%);
}
.bg-primary-900 {
    background-color: hsl(15, 75%, 28%);
}
.bg-primary-950 {
    background-color: hsl(13, 81%, 15%);
}

.text-primary-50 {
    color: hsl(33, 100%, 96%);
}
.text-primary-100 {
    color: hsl(34, 100%, 92%);
}
.text-primary-200 {
    color: hsl(32, 98%, 83%);
}
.text-primary-300 {
    color: hsl(31, 97%, 72%);
}
.text-primary-400 {
    color: hsl(27, 96%, 61%);
}
.text-primary-500 {
    color: hsl(25, 95%, 53%);
}
.text-primary-600 {
    color: hsl(21, 90%, 48%);
}
.text-primary-700 {
    color: hsl(17, 88%, 40%);
}
.text-primary-800 {
    color: hsl(15, 79%, 34%);
}
.text-primary-900 {
    color: hsl(15, 75%, 28%);
}
.text-primary-950 {
    color: hsl(13, 81%, 15%);
}

.border-primary-50 {
    border-color: hsl(33, 100%, 96%);
}
.border-primary-100 {
    border-color: hsl(34, 100%, 92%);
}
.border-primary-200 {
    border-color: hsl(32, 98%, 83%);
}
.border-primary-300 {
    border-color: hsl(31, 97%, 72%);
}
.border-primary-400 {
    border-color: hsl(27, 96%, 61%);
}
.border-primary-500 {
    border-color: hsl(25, 95%, 53%);
}
.border-primary-600 {
    border-color: hsl(21, 90%, 48%);
}
.border-primary-700 {
    border-color: hsl(17, 88%, 40%);
}
.border-primary-800 {
    border-color: hsl(15, 79%, 34%);
}
.border-primary-900 {
    border-color: hsl(15, 75%, 28%);
}
.border-primary-950 {
    border-color: hsl(13, 81%, 15%);
}

.card:hover {
    background-color: hsl(33, 100%, 96%);
}
