:root {
    --rff-font-size-body: 1rem;
    --rff-font-size-small: 0.875rem;
    --rff-font-size-h1: 1.75rem;
    --rff-font-size-h2: 1.5rem;
    --rff-font-size-h3: 1.25rem;
    --rff-font-size-h4: 1.125rem;
    --rff-font-size-h5: 1rem;
    --rff-font-size-h6: 0.875rem;
    --bs-body-font-size: var(--rff-font-size-body);
}

body {
    font-size: var(--rff-font-size-body);
}

#app-layout :where(p, li, label, input, select, textarea, button, .btn, .form-control, .form-select, .form-check-label, .table, .mud-typography, .mud-table-cell, .mud-input, .mud-button-label) {
    font-size: var(--rff-font-size-body) !important;
}

#app-layout h1 {
    font-size: var(--rff-font-size-h1) !important;
}

#app-layout h2 {
    font-size: var(--rff-font-size-h2) !important;
}

#app-layout h3 {
    font-size: var(--rff-font-size-h3) !important;
}

#app-layout h4 {
    font-size: var(--rff-font-size-h4) !important;
}

#app-layout h5 {
    font-size: var(--rff-font-size-h5) !important;
}

#app-layout h6,
#app-layout small,
#app-layout .small,
#app-layout .status-badge {
    font-size: var(--rff-font-size-small) !important;
}

/* Public landing-page banners use a consistent display scale across pages. */
#app-layout .donorh1 {
    font-size: 2.25rem !important;
}

#app-layout .donorh3 {
    font-size: 1.25rem !important;
}

#app-layout .bigtitle {
    font-size: 1.75rem !important;
}

#app-layout .accordion-button {
    font-size: var(--rff-font-size-body) !important;
}

#app-layout .accordion-body {
    font-size: var(--rff-font-size-body) !important;
}

@media (max-width: 768px) {
    #app-layout .donorh1 {
        font-size: 2rem !important;
    }

    #app-layout .donorh3 {
        font-size: 1.125rem !important;
    }

    #app-layout .bigtitle {
        font-size: 1.5rem !important;
    }
}