/*
 * Shared application typography.
 *
 * Manrope gives the storefront and dashboards one clean, contemporary voice.
 * The system fallback keeps every screen readable if the web font is unavailable.
 * Icon fonts are intentionally not targeted here.
 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --app-font-sans: "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;
}

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;
}