.btn {
    font-family: var(--font-title);
    font-size: var(--font-size-button);
    letter-spacing: 1px;
    border: none;
    transition: background-color 0.3s ease;
    text-decoration: none !important;

    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.5rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
}

.btn-text-body {
    font-family: var(--font-body);
    letter-spacing: initial;
}

.btn-radio {
    font-family: var(--font-body);
    letter-spacing: initial;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-check:checked+.btn-radio {
    background-color: var(--color-interactive-default);
    color: var(--color-text-light);
    font-weight: bold;
}

.btn-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-brand-secondary);

    --bs-btn-disabled-bg: var(--color-brand-primary);
    --bs-btn-disabled-border-color: var(--color-brand-secondary);
    --bs-btn-disabled-opacity: 0.35;
}

.btn-primary:hover {
    background-color: var(--color-interactive-highlight);
    color: var(--color-text-primary);
}

.btn-primary:active {
    background-color: var(--color-brand-accent);
}

.btn-secondary {
    background-color: var(--color-interactive-default);
    color: var(--color-brand-secondary);

    --bs-btn-disabled-bg: var(--color-interactive-default);
    --bs-btn-disabled-border-color: var(--color-brand-secondary);
    --bs-btn-disabled-opacity: 0.35;
}

.btn-secondary:hover {
    background-color: var(--color-interactive-hover);
}

.btn-secondary:active {
    background-color: var(--color-interactive-active);
}