:root {
    --site-primary: #e33c21;
    --site-primary-dark: #c7341c;
    --site-primary-rgb: 227, 60, 33;
}

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

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

.bg-site-primary-10 {
    background-color: rgba(var(--site-primary-rgb), 0.1);
}

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

.border-site-primary-20 {
    border-color: rgba(var(--site-primary-rgb), 0.2);
}

.border-site-primary-30 {
    border-color: rgba(var(--site-primary-rgb), 0.3);
}

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

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

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

.hover\:border-site-primary:hover {
    border-color: var(--site-primary);
}

.focus-visible\:ring-site-primary:focus-visible,
.focus\:ring-site-primary:focus,
.focus-within\:ring-site-primary:focus-within {
    --tw-ring-color: var(--site-primary);
}

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