@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--20);
        --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);

        @supports (color: color(from red srgb r g b)) {
            --color--brand--97: color(from var(--color--palette--blue--97) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--90: color(from var(--color--palette--blue--90) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--85: color(from var(--color--palette--blue--85) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--70: color(from var(--color--palette--blue--70) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--50: color(from var(--color--palette--blue--50) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--20: color(from var(--color--palette--blue--20) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand: color(from var(--color--palette--blue) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--contrast: color(from var(--color--palette--blue--contrast) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--contrast--alt: color(from var(--color--palette--blue--contrast) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--highlight: color(from var(--color--palette--highlight--yellow) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
            --color--brand--highlight--soft: color(from var(--color--palette--blue--yellow--soft) srgb calc(r * var(--page--tint--red)) calc(g * var(--page--tint--green)) calc(b * var(--page--tint--blue)));
        }

        /* 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: 12px;
        /* This was 11 */
        /* 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;
    }
}