@layer semantics {
    :root {
        /* Colors */
        --color--brand--97: var(--color--palette--blue--97);
        --color--brand--90: var(--color--palette--blue--90);
        --color--brand--85: var(--color--palette--blue--85);
        --color--brand--80: var(--color--brand--85);
        --color--brand--70: var(--color--palette--blue--70);
        --color--brand--50: var(--color--palette--blue--50);
        --color--brand--20: var(--color--palette--blue--20);
        --color--brand: var(--color--palette--blue);
        --color--brand--contrast: var(--color--palette--blue--contrast);
        --color--brand--contrast--alt: var(--color--palette--blue--contrast);
        --color--brand--white: var(--color--palette--white--true);
        --color--brand--black: var(--color--brand--50);
        --color--brand--highlight: var(--color--palette--highlight--yellow);
        --color--brand--highlight--soft: var(--color--palette--highlight--yellow--soft);
        --color--header--text: var(--color--brand--white);

        /* Revisit */
        --color--highlight: var(--color--brand--highlight);
        --color--input: var(--color--brand--black);
        --color--danger: var(--color--palette--red);
        --color--loud: var(--color--palette--green);
        /* End */

        --color--background--primary: var(--color--brand--97);
        --color--background--secondary: var(--color--brand--white);
        --color--border: var(--color--brand--70);

        --color--text--primary: var(--color--brand--black);
        --color--text--inverted: var(--color--brand--white);

        /*
        Font Styles:

        Properties:
        - family
        - size
        - weight
        - line-height
        - letter-spacing
        - casing

        Titles: xlarge, large, medium, small, xsmall, xxsmall
        Text: xl, l, m, s
        Caption: l, m, s
        */

        /* title - xlarge */
        --font--title--family--xlarge: var(--font--family--brand);
        --font--title--size--xlarge: 4.0625rem;
        --font--title--weight--xlarge: 500;
        --font--title--line-height--xlarge: 0.95;
        --font--title--letter-spacing--xlarge: 0;
        --font--title--casing--xlarge: none;

        /* title - large */
        --font--title--family--large: var(--font--family--brand);
        --font--title--size--large: 2.5rem;
        --font--title--weight--large: 500;
        --font--title--line-height--large: 0.90;
        --font--title--letter-spacing--large: 0;
        --font--title--casing--large: none;

        /* title - medium */
        --font--title--family--medium: var(--font--family--sans-serif);
        --font--title--size--medium: 2.25rem;
        --font--title--weight--medium: 700;
        --font--title--line-height--medium: 1;
        --font--title--letter-spacing--medium: 0;
        --font--title--casing--medium: none;

        /* title - small */
        --font--title--family--small: var(--font--family--sans-serif);
        --font--title--size--small: 1.75rem;
        --font--title--weight--small: 900;
        --font--title--line-height--small: 1;
        --font--title--letter-spacing--small: 0;
        --font--title--casing--small: none;

        /* title - xsmall */
        --font--title--family--xsmall: var(--font--family--sans-serif);
        --font--title--size--xsmall: 1rem;
        --font--title--weight--xsmall: 900;
        --font--title--line-height--xsmall: 1.15;
        --font--title--letter-spacing--xsmall: 0;
        --font--title--casing--xsmall: none;

        /* title - xxsmall */
        --font--title--family--xxsmall: var(--font--family--sans-serif);
        --font--title--size--xxsmall: 0.8125rem;
        --font--title--weight--xxsmall: 900;
        --font--title--line-height--xxsmall: 1.15;
        --font--title--letter-spacing--xxsmall: 0;
        --font--title--casing--xxsmall: none;

        /* title - xxsmall - all caps */
        --font--title--family--xxsmall--all-caps: var(--font--family--sans-serif);
        --font--title--size--xxsmall--all-caps: 0.75rem;
        --font--title--weight--xxsmall--all-caps: 900;
        --font--title--line-height--xxsmall--all-caps: 1.25;
        --font--title--letter-spacing--xxsmall--all-caps: 0.1em;
        --font--title--casing--xxsmall--all-caps: uppercase;

        /* text - xlarge */
        --font--text--family--xlarge: var(--font--family--serif);
        --font--text--size--xlarge: 2.625rem;
        --font--text--weight--xlarge: 300;
        --font--text--line-height--xlarge: 1.5;
        --font--text--letter-spacing--xlarge: 0;
        --font--text--casing--xlarge: none;

        /* text - large */
        --font--text--family--large: var(--font--family--serif);
        --font--text--size--large: 1.375rem;
        --font--text--weight--large: 300;
        --font--text--line-height--large: 1.5;
        --font--text--letter-spacing--large: 0;
        --font--text--casing--large: none;

        /* text - medium */
        --font--text--family--medium: var(--font--family--serif);
        --font--text--size--medium: 1.125rem;
        --font--text--weight--medium: 400;
        --font--text--line-height--medium: 1.5;
        --font--text--letter-spacing--medium: 0;
        --font--text--casing--medium: none;

        /* text - small */
        --font--text--family--small: var(--font--family--serif);
        --font--text--size--small: 0.9375rem;
        --font--text--weight--small: 400;
        --font--text--line-height--small: 1.5;
        --font--text--letter-spacing--small: 0;
        --font--text--casing--small: none;

        /* caption - large */
        --font--caption--family--large: var(--font--family--sans-serif);
        --font--caption--size--large: 1.25rem;
        --font--caption--weight--large: 400;
        --font--caption--line-height--large: 1.4;
        --font--caption--letter-spacing--large: 0;
        --font--caption--casing--large: none;

        /* caption - medium */
        --font--caption--family--medium: var(--font--family--sans-serif);
        --font--caption--size--medium: 0.9375rem;
        --font--caption--weight--medium: 450;
        --font--caption--line-height--medium: 1.4;
        --font--caption--letter-spacing--medium: 0;
        --font--caption--casing--medium: none;

        /* caption - small */
        --font--caption--family--small: var(--font--family--sans-serif);
        --font--caption--size--small: 0.8125rem;
        --font--caption--weight--small: 500;
        --font--caption--line-height--small: 1.4;
        --font--caption--letter-spacing--small: 0;
        --font--caption--casing--small: none;

        /* caption - xsmall */
        --font--caption--family--xsmall: var(--font--family--sans-serif);
        --font--caption--size--xsmall: 0.6875rem;
        --font--caption--weight--xsmall: 500;
        --font--caption--line-height--xsmall: 1.4;
        --font--caption--letter-spacing--xsmall: 0;
        --font--caption--casing--xsmall: none;

        /* input - medium */
        --font--input--family--medium: var(--font--family--monospace);
        --font--input--size--medium: 1.25rem;
        --font--input--weight--medium: 600;
        --font--input--line-height--medium: 1;
        --font--input--letter-spacing--medium: 0;
        --font--input--casing--medium: none;

        /* input - small */
        --font--input--family--small: var(--font--family--monospace);
        --font--input--size--small: 0.875rem;
        --font--input--weight--small: 700;
        --font--input--line-height--small: 1;
        --font--input--letter-spacing--small: 0;
        --font--input--casing--small: none;

        /* button */
        --font--button--family: var(--font--family--sans-serif);
        --font--button--size: 1rem;
        --font--button--weight: 500;
        --font--button--line-height: 1.15;
        --font--button--letter-spacing: 0;
        --font--button--casing: none;
    }

    a {
        &, &:hover, &:visited, &:active {
            color: var(--color--text--primary)
        }
    }

    h1 {
        font-family: var(--font--title--family--xlarge);
        font-size: var(--font--title--size--xlarge);
        font-weight: var(--font--title--weight--xlarge);
        line-height: var(--font--title--line-height--xlarge);
        letter-spacing: var(--font--title--letter-spacing--xlarge);
        text-transform: var(--font--title--casing--xlarge);
    }

    h2 {
        font-family: var(--font--title--family--medium);
        font-size: var(--font--title--size--medium);
        font-weight: var(--font--title--weight--medium);
        line-height: var(--font--title--line-height--medium);
        letter-spacing: var(--font--title--letter-spacing--medium);
        text-transform: var(--font--title--casing--medium);
    }

    p {
        font-family: var(--font--text--family--large);
        font-size: var(--font--text--size--large);
        font-weight: var(--font--text--weight--large);
        line-height: var(--font--text--line-height--large);
        letter-spacing: var(--font--text--letter-spacing--large);
        text-transform: var(--font--text--casing--large);
    }

    :root {
        --page--tint--red: 1.0;
        --page--tint--green: 1.0;
        --page--tint--blue: 1.0;
        --color--brand--page-tint: #ffffff;
    }

    @supports (color: color(from red srgb r g b)) {
        :root {
            --color--danger: color(from var(--color--palette--red) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--loud: color(from var(--color--palette--green) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
        }
    }
}

html {
    background-color: var(--color--brand);
}

/* Mode of font-size */
:root {
    --min-width: 22.5;
    --max-width: 80;

    /* title - xlarge */
    --font--title--size--xlarge--max: 3.25;
    --font--title--size--xlarge--min: 2.5;

    /* title - large */
    --font--title--size--large--max: 1.875;
    --font--title--size--large--min: 1.5;

    /* title - medium */
    --font--title--size--medium--max: 1.75;
    --font--title--size--medium--min: 1.5;

    /* title - small */
    --font--title--size--small--max: 1.25;
    --font--title--size--small--min: 1;

    /* title - xsmall */
    --font--title--size--xsmall--max: 1;
    --font--title--size--xsmall--min: 0.875;

    /* title - xxsmall */
    --font--title--size--xxsmall--max: 0.875;
    --font--title--size--xxsmall--min: 0.8125;

    /* title - xxsmall - all caps */
    --font--title--size--xxsmall--all-caps--max: 0.875;
    --font--title--size--xxsmall--all-caps--min: 0.8125;

    /* text - xlarge */
    --font--text--size--xlarge--max: 2;
    --font--text--size--xlarge--min: 1.5;

    /* text - large */
    --font--text--size--large--max: 1.25;
    --font--text--size--large--min: 1;

    /* text - medium */
    --font--text--size--medium--max: 0.875;
    --font--text--size--medium--min: 0.75;

    /* text - small */
    --font--text--size--small--max: 0.825;
    --font--text--size--small--min: 0.75;

    /* caption - large */
    --font--caption--size--large--max: 1;
    --font--caption--size--large--min: 0.875;

    /* caption - medium */
    --font--caption--size--medium--max: 0.875;
    --font--caption--size--medium--min: 0.75;

    /* caption - small */
    --font--caption--size--small--max: 0.8125;
    --font--caption--size--small--min: 0.75;

    /* caption - xsmall */
    --font--caption--size--xsmall--max: 1;
    --font--caption--size--xsmall--min: 0.875;

    /* input - medium */
    --font--input--size--medium--max: 1;
    --font--input--size--medium--min: 0.875;

    /* input - small */
    --font--input--size--small--max: 0.875;
    --font--input--size--small--min: 0.75;

    /* button */
    --font--button--size--max: 0.875;
    --font--button--size--min: 0.75;

    /* calculations - title - xlarge */
    --font--title--size--xlarge--slope: calc(
        (
            var(--font--title--size--xlarge--max) -
            var(--font--title--size--xlarge--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--xlarge--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--xlarge--slope) +
        var(--font--title--size--xlarge--min)
    );

    --font--title--size--xlarge: clamp(
        var(--font--title--size--xlarge--min) * 1rem,
        (var(--font--title--size--xlarge--intersection) * 1rem) +
        (var(--font--title--size--xlarge--slope) * 100 * 1vw),
        var(--font--title--size--xlarge--max) * 1rem
    );

    /* calculations - title - large */
    --font--title--size--large--slope: calc(
        (
            var(--font--title--size--large--max) -
            var(--font--title--size--large--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--large--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--large--slope) +
        var(--font--title--size--large--min)
    );

    --font--title--size--large: clamp(
        var(--font--title--size--large--min) * 1rem,
        (var(--font--title--size--large--intersection) * 1rem) +
        (var(--font--title--size--large--slope) * 100 * 1vw),
        var(--font--title--size--large--max) * 1rem
    );

    /* calculations - title - medium */
    --font--title--size--medium--slope: calc(
        (
            var(--font--title--size--medium--max) -
            var(--font--title--size--medium--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--medium--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--medium--slope) +
        var(--font--title--size--medium--min)
    );

    --font--title--size--medium: clamp(
        var(--font--title--size--medium--min) * 1rem,
        (var(--font--title--size--medium--intersection) * 1rem) +
        (var(--font--title--size--medium--slope) * 100 * 1vw),
        var(--font--title--size--medium--max) * 1rem
    );

    /* calculations - title - small */
    --font--title--size--small--slope: calc(
        (
            var(--font--title--size--small--max) -
            var(--font--title--size--small--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--small--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--small--slope) +
        var(--font--title--size--small--min)
    );

    --font--title--size--small: clamp(
        var(--font--title--size--small--min) * 1rem,
        (var(--font--title--size--small--intersection) * 1rem) +
        (var(--font--title--size--small--slope) * 100 * 1vw),
        var(--font--title--size--small--max) * 1rem
    );

    /* calculations - title - xsmall */
    --font--title--size--xsmall--slope: calc(
        (
            var(--font--title--size--xsmall--max) -
            var(--font--title--size--xsmall--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--xsmall--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--xsmall--slope) +
        var(--font--title--size--xsmall--min)
    );

    --font--title--size--xsmall: clamp(
        var(--font--title--size--xsmall--min) * 1rem,
        (var(--font--title--size--xsmall--intersection) * 1rem) +
        (var(--font--title--size--xsmall--slope) * 100 * 1vw),
        var(--font--title--size--xsmall--max) * 1rem
    );

    /* calculations - title - xxsmall */
    --font--title--size--xxsmall--slope: calc(
        (
            var(--font--title--size--xxsmall--max) -
            var(--font--title--size--xxsmall--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--xxsmall--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--xxsmall--slope) +
        var(--font--title--size--xxsmall--min)
    );

    --font--title--size--xxsmall: clamp(
        var(--font--title--size--xxsmall--min) * 1rem,
        (var(--font--title--size--xxsmall--intersection) * 1rem) +
        (var(--font--title--size--xxsmall--slope) * 100 * 1vw),
        var(--font--title--size--xxsmall--max) * 1rem
    );

    /* calculations - title - xxsmall - all caps */
    --font--title--size--xxsmall--slope: calc(
        (
            var(--font--title--size--xxsmall--max) -
            var(--font--title--size--xxsmall--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--title--size--xxsmall--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--title--size--xxsmall--slope) +
        var(--font--title--size--xxsmall--min)
    );

    --font--title--size--xxsmall: clamp(
        var(--font--title--size--xxsmall--min) * 1rem,
        (var(--font--title--size--xxsmall--intersection) * 1rem) +
        (var(--font--title--size--xxsmall--slope) * 100 * 1vw),
        var(--font--title--size--xxsmall--max) * 1rem
    );

    /* calculations - text - xlarge */
    --font--text--size--xlarge--max: 2.625;
    --font--text--size--xlarge--min: 2.23125;

    --font--text--size--xlarge--slope: calc(
        (
            var(--font--text--size--xlarge--max) -
            var(--font--text--size--xlarge--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--text--size--xlarge--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--text--size--xlarge--slope) +
        var(--font--text--size--xlarge--min)
    );

    --font--text--size--xlarge: clamp(
        var(--font--text--size--xlarge--min) * 1rem,
        (var(--font--text--size--xlarge--intersection) * 1rem) +
        (var(--font--text--size--xlarge--slope) * 100 * 1vw),
        var(--font--text--size--xlarge--max) * 1rem
    );

    /* calculations - text - large */
    --font--text--size--large--slope: calc(
        (
            var(--font--text--size--large--max) -
            var(--font--text--size--large--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--text--size--large--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--text--size--large--slope) +
        var(--font--text--size--large--min)
    );

    --font--text--size--large: clamp(
        var(--font--text--size--large--min) * 1rem,
        (var(--font--text--size--large--intersection) * 1rem) +
        (var(--font--text--size--large--slope) * 100 * 1vw),
        var(--font--text--size--large--max) * 1rem
    );

    /* calculations - text - medium */
    --font--text--size--medium--slope: calc(
        (
            var(--font--text--size--medium--max) -
            var(--font--text--size--medium--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--text--size--medium--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--text--size--medium--slope) +
        var(--font--text--size--medium--min)
    );

    --font--text--size--medium: clamp(
        var(--font--text--size--medium--min) * 1rem,
        (var(--font--text--size--medium--intersection) * 1rem) +
        (var(--font--text--size--medium--slope) * 100 * 1vw),
        var(--font--text--size--medium--max) * 1rem
    );

    /* calculations - text - small */
    --font--text--size--small--slope: calc(
        (
            var(--font--text--size--small--max) -
            var(--font--text--size--small--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--text--size--small--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--text--size--small--slope) +
        var(--font--text--size--small--min)
    );

    --font--text--size--small: clamp(
        var(--font--text--size--small--min) * 1rem,
        (var(--font--text--size--small--intersection) * 1rem) +
        (var(--font--text--size--small--slope) * 100 * 1vw),
        var(--font--text--size--small--max) * 1rem
    );

    /* calculations - caption - large */
    --font--caption--size--large--slope: calc(
        (
            var(--font--caption--size--large--max) -
            var(--font--caption--size--large--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--caption--size--large--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--caption--size--large--slope) +
        var(--font--caption--size--large--min)
    );

    --font--caption--size--large: clamp(
        var(--font--caption--size--large--min) * 1rem,
        (var(--font--caption--size--large--intersection) * 1rem) +
        (var(--font--caption--size--large--slope) * 100 * 1vw),
        var(--font--caption--size--large--max) * 1rem
    );

    /* calculations - caption - medium */
    --font--caption--size--medium--slope: calc(
        (
            var(--font--caption--size--medium--max) -
            var(--font--caption--size--medium--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--caption--size--medium--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--caption--size--medium--slope) +
        var(--font--caption--size--medium--min)
    );

    --font--caption--size--medium: clamp(
        var(--font--caption--size--medium--min) * 1rem,
        (var(--font--caption--size--medium--intersection) * 1rem) +
        (var(--font--caption--size--medium--slope) * 100 * 1vw),
        var(--font--caption--size--medium--max) * 1rem
    );

    /* calculations - caption - small */
    --font--caption--size--small--slope: calc(
        (
            var(--font--caption--size--small--max) -
            var(--font--caption--size--small--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--caption--size--small--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--caption--size--small--slope) +
        var(--font--caption--size--small--min)
    );

    --font--caption--size--small: clamp(
        var(--font--caption--size--small--min) * 1rem,
        (var(--font--caption--size--small--intersection) * 1rem) +
        (var(--font--caption--size--small--slope) * 100 * 1vw),
        var(--font--caption--size--small--max) * 1rem
    );

    /* calculations - caption - xsmall */
    --font--caption--size--xsmall--slope: calc(
        (
            var(--font--caption--size--xsmall--max) -
            var(--font--caption--size--xsmall--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--caption--size--xsmall--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--caption--size--xsmall--slope) +
        var(--font--caption--size--xsmall--min)
    );

    --font--caption--size--xsmall: clamp(
        var(--font--caption--size--xsmall--min) * 1rem,
        (var(--font--caption--size--xsmall--intersection) * 1rem) +
        (var(--font--caption--size--xsmall--slope) * 100 * 1vw),
        var(--font--caption--size--xsmall--max) * 1rem
    );

    /* calculations - input - medium */
    --font--input--size--medium--slope: calc(
        (
            var(--font--input--size--medium--max) -
            var(--font--input--size--medium--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--input--size--medium--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--input--size--medium--slope) +
        var(--font--input--size--medium--min)
    );

    --font--input--size--medium: clamp(
        var(--font--input--size--medium--min) * 1rem,
        (var(--font--input--size--medium--intersection) * 1rem) +
        (var(--font--input--size--medium--slope) * 100 * 1vw),
        var(--font--input--size--medium--max) * 1rem
    );

    /* calculations - input - small */
    --font--input--size--small--slope: calc(
        (
            var(--font--input--size--small--max) -
            var(--font--input--size--small--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--input--size--small--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--input--size--small--slope) +
        var(--font--input--size--small--min)
    );

    --font--input--size--small: clamp(
        var(--font--input--size--small--min) * 1rem,
        (var(--font--input--size--small--intersection) * 1rem) +
        (var(--font--input--size--small--slope) * 100 * 1vw),
        var(--font--input--size--small--max) * 1rem
    );

    /* button */
    --font--button--size--max: 1;
    --font--button--size--min: 0.85;

    --font--button--size--slope: calc(
        (
            var(--font--button--size--max) -
            var(--font--button--size--min)
        ) / (
            var(--max-width) -
            var(--min-width)
        )
    );

    --font--button--size--intersection: calc(
        (-1 * var(--min-width)) *
        var(--font--button--size--slope) +
        var(--font--button--size--min)
    );

    --font--button--size: clamp(
        var(--font--button--size--min) * 1rem,
        (var(--font--button--size--intersection) * 1rem) +
        (var(--font--button--size--slope) * 100 * 1vw),
        var(--font--button--size--max) * 1rem
    );
}

:root.font-set-studioworks {
    /* Updating to use overrides only */

    /* title - xxsmall */
    --font--title--size--xxsmall--max: 0.8125;
    --font--title--size--xxsmall--min: 0.75;

    /* title - xxsmall - all caps */
    --font--title--size--xxsmall--all-caps--max: 0.8125;
    --font--title--size--xxsmall--all-caps--min: 0.75;
}

@media print, screen and (min-width: 600px) {
    article.invoice {
        /* These mostly use the min sizes from the clamping, with a few overrides (specified in pixels) */

        /* title - xlarge */
        --font--title--size--xlarge: 40px;

        /* title - large */
        --font--title--size--large: 28px; /* This was 24 */

        /* title - medium */
        --font--title--size--medium: 24px; /* This was 20 */

        /* title - small */
        --font--title--size--small: 20px; /* This was 16 */

        /* title - xsmall */
        --font--title--size--xsmall: 12px; /* This was 14 */

        /* title - xxsmall */
        --font--title--size--xxsmall: 0.8125rem;

        /* title - xxsmall - all caps */
        --font--title--size--xxsmall--all-caps: 0.8125rem;

        /* text - xlarge */
        --font--text--size--xlarge: 1.5rem;

        /* text - large */
        --font--text--size--large: 1rem;

        /* text - medium */
        --font--text--size--medium: 0.75rem;

        /* text - small */
        --font--text--size--small: 0.75rem;

        /* caption - large */
        --font--caption--size--large: 0.875rem;

        /* caption - medium */
        --font--caption--size--medium: 11px; /* This was 12 */

        /* caption - small */
        --font--caption--size--small: 0.75rem;

        /* caption - xsmall */
        --font--caption--size--xsmall: 0.875rem;

        /* input - medium */
        --font--input--size--medium: 0.875rem;

        /* input - small */
        --font--input--size--small: 0.75rem;

        /* button */
        --font--button--size: 0.75rem;
    }
}