/*!
 * BodyGraph typography overrides for Soft UI font-size utilities.
 *
 * Keeps the `.fs-*` helpers aligned with the global typography baseline
 * without modifying upstream framework assets.
 */

@font-face {
    font-family: 'Noto Sans Variable';
    src: url('../font/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Variable';
    src: url('../font/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Variable';
    src: url('../font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Variable';
    src: url('../font/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --bodygraph-font-base: 'Noto Sans Variable', 'Noto Sans', 'Montserrat Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bodygraph-font-display: 'Montserrat Variable', 'Noto Sans Variable', sans-serif;
}

html,
body {
    font-family: var(--bodygraph-font-base);
    font-weight: 400;
    font-kerning: normal;
}

button,
input,
select,
textarea {
    font-family: var(--bodygraph-font-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bodygraph-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fs-1 {
    font-size: calc(22.8px + 2.1vw) !important;
}

.fs-2 {
    font-size: calc(21.6px + 1.2vw) !important;
}

.fs-3 {
    font-size: calc(21px + 0.75vw) !important;
}

.fs-4 {
    font-size: calc(20.4px + 0.3vw) !important;
}

.fs-5 {
    font-size: 20px !important;
}

.fs-6 {
    font-size: 16px !important;
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 48px !important;
    }

    .fs-2 {
        font-size: 36px !important;
    }

    .fs-3 {
        font-size: 30px !important;
    }

    .fs-4 {
        font-size: 24px !important;
    }
}