@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800&display=swap');
:root {
    /*------------------------------------*\
        #TOKENS
    \*------------------------------------*/

    /**
     * CONTENTS
     *
     * COLORS
     * Brand Colors...............Globally-available variables and config
     * Neutral Colors.............Grayscale colors, including white and black
     * Utility Colors.............Colors generally used for messaging
     *
     * TYPOGRAPHY
     * Individual Fonts...........A list of variables that each return a single font from our current font stack
     * Font Families..............Returns a single list of all fonts in our current stack
     * Sizing.....................Font sizing
     * Weight.....................Font weights
     *
     * LAYOUT
     * Max-widths.................Maximum layout container width
     *
     * SPACING
     * Spacing defaults...........Spacing between elements
     * Line Heights...............Spacing between lines of text
     *
     * BORDERS
     * Border Width...............Border thicknesses
     * Border Radius..............Border radius definitions
     *
     * SHADOWS
     * Box Shadow.................Shorthand that includes offset, blur radius, and color
     *
     * ANIMATION
     * Animation Speed............Transition/animation speed variables
     * Animation easing...........Easing variables
     *
     * BREAKPOINTS
     * Breakpoints................Global breakpoint definitions
     */

    /*------------------------------------*\
        #COLORS
    \*------------------------------------*/

    /**
     * Neutral Colors
     */
    --color-white: #ffffff;

    --color-gray--60: #242729;
    --color-gray--50: #3f3f3f;
    --color-gray--40: #707070;
    --color-gray--30: #cccccc;
    --color-gray--20: #e8e8e8;
    --color-gray--10: #f5f5f5;

    /**
     * Utility Colors
     */
    --color-red--30: #ba140f;
    --color-red--10: #fef0f0;

    --color-orange--30: #cc3000;
    --color-orange--10: #fff3e5;

    --color-blue--30: #005ea1;
    --color-blue--10: #effaff;

    --color-green--30: #2f8532;
    --color-green--10: #f9fdf2;

    /**
     * Brand Colors
     */
    --color-brand--primary: #e21c11;
    --color-brand--light: var(--color-red--10);
    --color-brand--hover: #af0000;
    --color-brand--active: #7c0000;

    /*------------------------------------*\
        #TYPOGRAPHY
    \*------------------------------------*/

    /**
     * Individual Platform Fonts
     */
    --font-system: Montserrat, system-ui;
    --font-system--apple: -apple-system;
    --font-system--blinkmac: BlinkMacSystemFont;
    --font-system--microsoft: Tahoma, 'Segoe UI';
    --font-system--android: DroidSans, Roboto;
    --font-system--ubuntu: Ubuntu;
    --font-system--linux: Oxygen-Sans;
    --font-helvetica: Helvetica;
    --font-arial: Arial;
    --font-sans-serif: sans-serif;
    --font-serif: serif;
    --font-emoji--apple: 'Apple Color Emoji';
    --font-emoji--microsoft: 'Segoe UI Emoji';
    --font-symbol--microsoft: 'Segoe UI Symbol';

    /**
     * Individual Platform Monospaced Fonts
     */
    --font-system--mono: ui-monospace;
    --font-system--apple-mono: Menlo, Monaco;
    --font-system--microsoft-mono: 'Cascadia Mono', 'Segoe UI Mono';
    --font-system--android-mono: 'Droid Sans Mono', 'Roboto Mono';
    --font-system--ubuntu-mono: 'Ubuntu Monospace';
    --font-system--linux-mono: 'Oxygen Mono';
    --font-symbol--mono: 'fira mono';
    --font-monospace: monospace;

    /**
     * Font Families
     */
    --font-family: var(--font-system), var(--font-system--apple), var(--font-system--blinkmac), var(--font-system--microsoft), var(--font-system--android), var(--font-system--ubuntu),
    var(--font-system--linux), var(--font-helvetica), var(--font-arial), var(--font-sans-serif), var(--font-serif), var(--font-emoji--apple), var(--font-emoji--microsoft), var(--font-symbol--microsoft);
    --font-family--mono: var(--font-system--mono), var(--font-system--apple-mono), var(--font-system--microsoft-mono), var(--font-system--android-mono),
    var(--font-system--ubuntu-mono), var(--font-system--linux-mono), var(--font-symbol--mono), var(--font-monospace);
    --font-family--emoji: var(--font-emoji--apple), var(--font-emoji--microsoft), var( --font-symbol--microsoft);

    /**
     * Sizing
     */
    --font-scale: 100%;
    --font-size--42: 2.625rem;
    --font-size--36: 2rem;
    --font-size--30: 1.875rem;
    --font-size--28: 1.75rem;
    --font-size--24: 1.5rem;
    --font-size--22: 1.375rem;
    --font-size--20: 1.25rem;
    --font-size--18: 1.125rem;
    --font-size--16: 1rem;
    --font-size--14: 0.875rem;
    --font-size--12: 0.75rem;

    /**
     * Weight
     */
    --font-weight--bold: 700;
    --font-weight--semi-bold: 500;
    --font-weight--regular: 400;
    --font-weight--light: 300;
    --font-weight--lighter: 100;

    /*------------------------------------*\
        #LAYOUT
    \*------------------------------------*/

    /**
     * Max Width
     */
    --lo-max-width: 60rem;
    --lo-linelength-width: 36rem;

    /*------------------------------------*\
        #SPACING
    \*------------------------------------*/

    /**
     * Spacing and offsets
     * 1) Used to space grids and body padding
     */
    --spacing: 1rem;
    --spacing--x-lg: calc(2 * var(--spacing));
    --spacing--lg: calc(1.5 * var(--spacing));
    --spacing--md: var(--spacing);
    --spacing--sm: calc(0.5 * var(--spacing));
    --spacing--x-sm: calc(0.25 * var(--spacing));

    /**
     * Line Height
     */
    --line-height: 1;
    --line-height--xx-lg: calc(1.5 * var(--line-height));
    --line-height--x-lg: calc(1.5 * var(--line-height));
    --line-height--lg: calc(1.15 * var(--line-height));

    /*------------------------------------*\
        #BORDERS
    \*------------------------------------*/

    /**
     * Border widths
     */
    --border-width: 1px;

    /**
     * Border radius
     */
    --border-radius: 4px;

    /*------------------------------------*\
        #SHADOWS
    \*------------------------------------*/

    /**
     * Box shadow
     */
    --shadow-subtle: 0px 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-raised: 0px 1px 10px rgba(0, 0, 0, 0.5);

    /*------------------------------------*\
        #ANIMATION
    \*------------------------------------*/

    /**
     * Transition Speed
     */
    --animation-fade--quick: 0.15s;
    --animation-fade--long: 0.4s;

    /**
     * Transition Ease
     */
    --animation--ease-out: ease-out;

    /*------------------------------------*\
        #BREAKPOINTS
    \*------------------------------------*/
    --breakpoint-screen--x-lg: 86.25rem;
    --breakpoint-screen--lg: 64rem;
    --breakpoint-screen--md: 60rem;
    --breakpoint-screen--sm: 48rem;
    --breakpoint-screen--x-sm: 33rem;
}