@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

body {
    font-family: var(--font-global);
}

h1,
.header-title,
.mantine-Drawer-title {
    font-family: var(--font-global) !important;
    /* font-family: var(--font-title) !important; */
    color: var(--on-background);
    font-weight: 600;
    font-size: 28px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
    font-weight: normal;
}

.section-title {
    font-family: var(--font-title) !important;
    color: var(--on-background);
    font-weight: 500;
    font-size: 18px;
}

.mantine-Modal-title {
    font-family: var(--font-global) !important;
    /* font-family: var(--font-title) !important; */
    color: var(--on-background);
    font-weight: 600;
    font-size: 20px;
}

.header-subtitle-on-bg {
    font-family: var(--font-title) !important;
    color: var(--on-primary);
}

.js-plotly-plot .plotly {
    font-family: var(--font-global) !important;
}