.modal-card {
    border-radius: var(--radius-md);
    background-color: var(--color-bg-page);
}

.modal-heading {
    color: var(--color-text-heading);
    font-size: var(--font-size-lg);
}

.modal-alert {
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.modal-error {
    font-size: var(--font-size-sm);
}

.modal-error-list {
    list-style: none;
}

.modal-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-heading);
}

.modal-input {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    font-size: var(--font-size-base);
}

.modal-input-group-start {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-color: var(--color-border);
    font-size: var(--font-size-base);
}

.modal-input-group-end {
    border-color: var(--color-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.modal-submit {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-base);
}

.modal-footer-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
}

.modal-footer-link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.ui-modal-message {
    font-size: var(--font-size-base);
    color: var(--color-text-body);
    line-height: var(--line-height-normal);
}

.ui-modal-cancel {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
}