typography.scss

/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1280;

    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1280px) {
    :root {
        --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
}

:root {
    --f--2-min: 12.64;
    --f--2-max: 10.24;
    --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));

    --f--1-min: 14.22;
    --f--1-max: 12.80;
    --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));

    --f-0-min: 16.00;
    --f-0-max: 16.00;
    --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));

    --f-1-min: 18.00;
    --f-1-max: 20.00;
    --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));

    --f-2-min: 20.25;
    --f-2-max: 25.00;
    --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));

    --f-3-min: 22.78;
    --f-3-max: 31.25;
    --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));

    --f-4-min: 25.63;
    --f-4-max: 39.06;
    --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));

    --f-5-min: 28.83;
    --f-5-max: 48.83;
    --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));

    --f-6-min: 32.44;
    --f-6-max: 61.04;
    --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp));
}

:root {
    --mono-font: "Mono Punctuators", "Space Mono", monospace;
    --text-font:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Twemoji Country Flags",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    --display-font:
        "Space Grotesk",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
}