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

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

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

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

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

[data-font-size="small"] {
    font-size: 0.875rem;
}

[data-font-size="small"] h1 {
    font-size: 1.5rem;
}

[data-font-size="small"] h2 {
    font-size: 1.25rem;
}

[data-font-size="small"] h3 {
    font-size: 1.125rem;
}

[data-font-size="large"] {
    font-size: 1.125rem;
}

[data-font-size="large"] h1 {
    font-size: 2.25rem;
}

[data-font-size="large"] h2 {
    font-size: 2rem;
}

[data-font-size="large"] h3 {
    font-size: 1.75rem;
}

aside {
    transition: width 0.3s ease-in-out;
}