/*
 * Shared application typography.
 *
 * The backend-selected family gives the storefront and dashboards one voice.
 * The system fallback keeps every screen readable if the web font is unavailable.
 * Icon fonts are intentionally not targeted here.
 */
:root {
    --app-font-sans: var(--website-font-family, "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --font-family-base: var(--app-font-sans) !important;
    --font-family-heading: var(--app-font-sans) !important;
    --bs-body-font-family: var(--app-font-sans) !important;
    --title-font: var(--app-font-sans) !important;
}

html,
body {
    font-family: var(--app-font-sans) !important;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * Cards, footer widgets, and legacy components may declare their own family.
 * Apply the selected website family to every element so those declarations do
 * not block the global setting. Icon-font classes retain their own family
 * because their class selectors are more specific than this element selector.
 */
html body *:not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class^="czi-"]):not([class*=" czi-"]):not([class^="tio-"]):not([class*=" tio-"]):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not([class^="ri-"]):not([class*=" ri-"]):not(.material-icons):not(.material-symbols-outlined) {
    font-family: var(--app-font-sans) !important;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--app-font-sans) !important;
    letter-spacing: -0.015em;
}