: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);

    /* 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.04em;
    --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.05em;
    --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.02em;
    --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.02em;
    --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.02em;
    --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);

    margin: 0;
    padding-bottom: 1.75rem;
    border-bottom: solid 0.5rem var(--color--border);
}

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);
    margin-top: 3rem;
}

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)));
    }
}