:root {
    --site-primary: #cb351f;
    --site-primary-dark: #a92c1c;
    --site-primary-rgb: 203, 53, 31;
    --site-ink: #17212b;
    --site-muted: #546372;
    --site-border: #d6dde5;
    --site-surface: #ffffff;
    --site-surface-muted: #f3f6f8;
    --site-page: #eef2f5;
}

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