:root {

    /* ----------------------------- */
    /* ?COLORS                       */
    /* ----------------------------- */

    /* ##Primary */
    --color-accent-primary: #FFFBF7;
    --color-accent-primary-50: #FFFDFB;
    --color-accent-primary-dark: #005f67;
    --color-accent-primary-darker: #00484d;

    /* ##Secondary */
    --color-accent-secondary: #211914;
    --color-accent-secondary-50: #908C89;

    /* ##Tertiary */
    --color-accent-tertiary: #c7ecaf;
    --color-accent-tertiary-50: #e3f5d7;

    /* ##Accents */
    --color-accent-1: #a68e7a;
    --color-accent-2: #d3c7bc;
    --color-accent-3: #908c8a;
    --color-accent-4: #76726F;
    --color-accent-5: #D9D9D9;
    --color-accent-6: #53473D;
    --color-accent-7: #59534F;

    /* ##Common */
    --color-black: #000;
    --color-white: #fff;
    --color-neutral: #fffbf7;
    --color-border: #211914;
    --color-overlay: #211914;
    --overlay-opacity: 0.6;
    --overlay-opacity-light: 0.8;
    --overlay-opacity-lighter: 0.3;
    --overlay-opacity-darker: 0.75;

    /* ##Headings */
    --color-h1: #fffbf7;
    --color-h2: #211914;
    --color-h3: #211914;
    --color-h-sub: #211914;

    /* ##Body */
    --color-text: #211914;
    --color-text-darkbg: #fffbf7;

    /* ----------------------------- */
    /* ?TYPOGRAPHY                   */
    /* ----------------------------- */

    /* ##Fonts */
    --font-stack-primary: 'Styrene B', sans-serif;
    --font-stack-secondary: 'Beaufort Pro', serif;
    --font-stack-charts: 'Mulish', sans-serif;

    /* ##H1 */
    --h1-size: 4.5rem;
    --h1-font-weight: 400;
    --h1-line-height: 4rem;
    --h1-letter-spacing: -0.09rem;
    --h1-mobile-size: 2.25rem;
    --h1-mobile-line-height: 2rem;
    --h1-mobile-letter-spacing: -0.045rem;

    /* ##H2 */
    --h2-size: 3rem;
    --h2-font-weight: 400;
    --h2-line-height: 2.75rem;
    --h2-letter-spacing: -0.06rem;
    --h2-separation-distance: 50px;
    --h2-mobile-size: 1.75rem;
    --h2-mobile-line-height: 1.75rem;
    --h2-mobile-letter-spacing: -0.035rem;

    /* ##H3 */
    --h3-size: 2rem;
    --h3-font-weight: 400;
    --h3-line-height: 2.25rem;
    --h3-letter-spacing: -0.02rem;
    --h3-mobile-size: 1.375rem;
    --h3-mobile-line-height: 1.5rem;
    --h3-mobile-letter-spacing: -0.025em;

    /* ##H4 */
    --h4-size: 32px;
    --h4-font-weight: 400;
    --h4-mobile-size: 18px;

    /* ##H5 */
    --h5-size: 24px;
    --h5-font-weight: 400;
    --h5-mobile-size: 14px;

    /* ##H6 */
    --h6-size: 12px;
    --h6-font-weight: 400;
    --h6-mobile-size: 12px;

    /* ##Body Styles */
    --large-body: 18px;
    --large-weight: 400;
    --large-height: 1.4;

    --medium-body: 16px;
    --medium-weight: 400;
    --medium-height: 1.25;

    --paragraph-font-size: 1rem;
    --paragraph-line-height: 1.25;
    --paragraph-letter-spacing: 0;
    --paragraph-mobile-font-size: 0.875rem;
    --paragraph-mobile-line-height: 1.125rem;
    --paragraph-mobile-letter-spacing: 0.0175rem;

    --small-body: 14px;
    --small-weight: 400;
    --small-height: 1.3;

    --x-small-body: 12px;
    --x-small-weight: 400;
    --x-small-height: 1.2;

    /* ##Date and Time Styles */
    --date-time-size: 14px;
    --date-time-weight: 400;
    --date-time-font-family: var(--font-stack-primary);
    --date-time-color: var(--color-text);
    --date-time-transform: none;

    /* ##Footnote Styles */
    --footnote-size: 12px;
    --footnote-weight: 400;
    --footnote-font-family: var(--font-stack-primary);
    --footnote-color: var(--color-text);

    /* ##Metric Styles */
    --metric-small: 48px;
    --metric-xsmall: 32px;

    /* ----------------------------- */
    /* ?LINKS                        */
    /* ----------------------------- */

    /* ##Button Default */
    --button-background: transparent;
    --button-border-width: 0.5px;
    --button-border-color: #211914;
    --button-border-radius: 0;
    --button-color: var(--color-black);
    --button-font-size: 0.75rem;
    --button-font-weight: 400;
    --button-font-family: var(--font-stack-primary);
    --button-padding-tb: 8px;
    --button-padding-lr: 16px;
    --button-letter-spacing: 0.015rem;
    --button-icon-size: 24px;
    --button-icon-weight: normal;

    /* ##Button Default Hover — dark fill + light text for WCAG contrast */
    --button-hover-color: #FFFBF7;
    --button-hover-background: #211914;
    --button-hover-border-width: 0.5px;
    --button-hover-border-color: #211914;

    /* ##Dark */
    --button-dark-background: transparent;
    --button-dark-border-width: var(--button-border-width);
    --button-dark-border-color: #fff;
    --button-dark-color: var(--color-text-darkbg);

    /* ##Dark Hover */
    --button-dark-hover-background: #fff;
    --button-dark-hover-border-width: var(--button-border-width);
    --button-dark-hover-border-color: #fff;
    --button-dark-hover-color: #000;

    /* ##Block Links Default */
    --block-link-font-family: var(--font-stack-primary);
    --block-link-font-size: 14px;
    --block-link-font-weight: 400;
    --block-link-color: #211914;
    --block-link-arrow-color: var(--color-accent-primary);

    /* ##Block Links Hover */
    --block-link-hover-color: #76726f;
    --block-link-hover-arrow-color: var(--color-accent-primary);

    /* ##Block Links Dark */
    --block-link-dark-color: #fffbf7;
    --block-link-dark-arrow-color: #fffbf7;

    /* ##Block Links Dark Hover */
    --block-link-dark-hover-color: #908c8a;
    --block-link-dark-hover-arrow-color: #908c8a;

    /* ##Text Links Default */
    --link-underline-thickness: 0.5px;
    --link-underline-offset: 0.3rem;
    --link-letter-spacing: 0.0175rem;
    --color-link: #211914;

    /* ##Text Links Hover */
    --color-link-hover: #211914;

    /* ##Text Links Dark */
    --color-link-darkbg: #fffbf7;

    /* ##Text Links Dark Hover */
    --color-link-darkbg-hover: #fffbf7;

    /* ##Text Links Paragraph Hover */
    --color-link-text-hover: #211914;

    /* ##Text Links Paragraph Hover Dark */
    --color-link-darkbg-text-hover: #fffbf7;

    /* ----------------------------- */
    /* ?TABLES                       */
    /* ----------------------------- */

    /* ##Table Headings */
    --table-heading-background: transparent;
    --table-heading-padding-tb: 10px;
    --table-heading-padding-lr: 15px;
    --table-heading-size: 12px;
    --table-heading-line-height: 16px;
    --table-heading-font-weight: 500;
    --table-heading-color: var(--color-text);
    --table-heading-text-transform: uppercase;
    --table-row-border-width: 0.5px;
    --table-row-border-color: var(--color-border);

    /* ##Table Data */
    --table-data-background: transparent;
    --table-data-padding: 20px 15px;
    --table-data-size: 12px;
    --table-data-line-height: 16px;
    --table-data-color: var(--color-text);

    /* ##Table Alternates */
    --table-data-alternate-background: transparent;
    --table-data-neutral-background: transparent;
    --table-data-alternate-link-color: var(--color-accent-secondary);
    --table-data-alternate-link-hover-color: var(--color-link-hover);

    /* ----------------------------- */
    /* ?GENERAL                      */
    /* ----------------------------- */
    --body-top-padding: 63px;
    --body-font-size: var(--medium-body);
    --body-font-weight: var(--medium-weight);
    --body-line-height: var(--medium-height);
    --main-content-margin-tb: 75px;
    --main-content-margin-lr: 0;
    --main-content-margin-mobile-tb: 50px;
    --main-content-margin-mobile-lr: 0;

    /* ----------------------------- */
    /* ?HEADER                       */
    /* ----------------------------- */

    /* ##Zero Nav */
    --zero-nav-background-color: var(--color-accent-primary);
    --zero-nav-padding-top: 6px;
    --zero-nav-padding-right: 0;
    --zero-nav-padding-bottom: 8px;
    --zero-nav-padding-left: 0;
    --zero-nav-color: #fff;
    --zero-nav-active-color: #fff;

    /* ##Main Background */
    --header-bg: transparent;
    --header-bg-affixed: #fffbf7;

    /* ##Main Font */
    --nav-font-family: var(--font-stack-primary);
    --nav-font-size: 12px;
    --nav-font-weight: 400;
    --nav-text-transform: none;
    --nav-color: #211914;
    --nav-color-hover: #76726f;
    --nav-color-active: #211914;
    --nav-accent-color: var(--color-accent-secondary);

    /* ##Main Spacing */
    --main-menu-top-position: 33px;
    --nav-padding-top: 0;
    --nav-padding-right: 6px;
    --nav-padding-bottom: 31px;
    --nav-padding-left: 23px;
    --nav-inline-padding: 23px;
    --nav-inline-padding-end: 6px;
    --nav-inline-padding-lg: 16px;
    --nav-inline-padding-lg-end: 6px;
    --nav-accent-bottom-position: 20px;

    /* ##Main Dropdown */
    --nav-dropdown-top-position: 55px;
    --nav-dropdown-bg: var(--color-accent-primary);
    --nav-dropdown-font-weight: 400;
    --nav-dropdown-font-size: 12px;
    --nav-dropdown-text-transform: uppercase;
    --nav-dropdown-color: var(--color-accent-secondary);
    --nav-dropdown-color-hover: var(--color-accent-secondary);
    --nav-dropdown-hover-background-color: var(--color-accent-primary);
    --nav-dropdown-shadow: none;

    /* ##Main Mobile */
    --nav-mobile-font-size: 16px;
    --nav-mobile-padding-top: 0;
    --nav-mobile-padding-right: 15px;
    --nav-mobile-padding-bottom: 31px;
    --nav-mobile-padding-left: 15px;
    --nav-color-mobile: #fff;
    --mobile-trigger-top-position: 15.5px;
    --mobile-trigger-color: #ffffff;
    --mobile-trigger-background-color: var(--color-accent-secondary);

    /* ----------------------------- */
    /* ?SUB NAVIGATION               */
    /* ----------------------------- */
    --sub-nav-top-position: 64px;
    --sub-nav-background: var(--color-accent-secondary);
    --sub-nav-link-font-size: 12px;
    --sub-nav-link-font-family: var(--font-stack-primary);
    --sub-nav-link-color: var(--color-accent-primary);
    --sub-nav-link-hover-background: var(--color-accent-secondary);
    --sub-nav-active-link-color: var(--color-accent-primary);
    --sub-nav-link-font-weight: 500;
    --sub-nav-link-text-transform: uppercase;

    /* ##Mobile Sub Navigation Title */
    --sub-nav-section-title-text-transform: uppercase;
    --sub-nav-section-title-font-size: 16px;
    --sub-nav-section-title-font-weight: 600;
    --sub-nav-section-title-font-color: #fff;

    /* ----------------------------- */
    /* ?TERTIARY NAVIGATION          */
    /* ----------------------------- */

    /* ##Mobile Tertiary Nav Title */
    --tertiary-nav-margin-top: 60px;
    --tertiary-nav-title-font-size: 18px;
    --tertiary-nav-title-font-weight: 700;

    /* ##Mobile Tertiary Nav Links */
    --tertiary-nav-link-color: var(--color-text);
    --tertiary-nav-link-color-hover: var(--color-accent-secondary);
    --tertiary-nav-link-color-active: var(--color-accent-secondary);
    --tertiary-nav-link-font-size: 16px;
    --tertiary-nav-link-font-weight: 400;
    --tertiary-nav-link-padding-tb: 10px;
    --tertiary-nav-link-padding-lr: 0;

    /* ----------------------------- */
    /* ?QUICK LINKS                  */
    /* ----------------------------- */
    --quick-links-background: var(--color-neutral);
    --quick-links-padding-tb: 14px;
    --quick-links-padding-lr: 10px;
    --quick-links-font-size: 12px;
    --quick-links-font-weight: 400;
    --quick-links-font-family: var(--font-stack-primary);
    --quick-links-color: var(--color-accent-secondary);
    --quick-links-color-hover: var(--color-accent-secondary);
    --quick-links-icon-size: 16px;
    --quick-links-icon-color: var(--color-accent-secondary);

    /* ----------------------------- */
    /* ?FOOTER                       */
    /* ----------------------------- */

    /* ##Footer Links */
    --footer-bg: var(--color-accent-secondary);
    --footer-color: #fff;
    --footer-font-size: 0.75rem;
    --footer-font-family: var(--font-stack-primary);

    /* ##Social Icons */
    --social-icon-bg: #fffbf7;
    --social-icon-hover-bg: #000;
    --social-icon-color: var(--color-accent-primary);
    --social-icon-hover-color: #fffbf7;
    --social-icon-width: 24px;
    --social-icon-height: 24px;

    /* ##QMod */
    --qmod-background: #211914;
    --qmod-color: #fffbf7;
    --qmod-font-size: 12px;

    /* ----------------------------- */
    /* ?PAGE BANNERS                 */
    /* ----------------------------- */

    /* ##Homepage */
    --home-banner-height: 690px;
    --home-page-banner-h2-color: #fff;
    --home-page-banner-h2-size: 60px;
    --home-page-banner-h2-font-weight: 700;
    --home-page-banner-subtitle-color: #fff;
    --home-page-banner-subtitle-size: 20px;
    --home-page-banner-subtitle-weight: 700;

    /* ##Interior Banner */
    --interior-banner-height: 200px;
    --interior-banner-mobile-height: 200px;
    --interior-page-banner-h1-color: #fff;
    --interior-page-banner-h1-size: 4.5rem;
    --interior-page-banner-h1-font-weight: 400;
    --interior-page-banner-h1-line-height: 4rem;
    --interior-page-banner-h1-letter-spacing: -0.09rem;
    --interior-page-banner-subtitle-color: #fff;
    --interior-page-banner-subtitle-size: 16px;
    --interior-page-banner-subtitle-weight: 400;

    /* ##IR Banner */
    --ir-banner-height: 500px;

    /* ##IR CTA H2 */
    --ir-cta-h2-size: var(--h2-size);
    --ir-cta-h2-font-weight: var(--h2-font-weight);
    --ir-cta-h2-line-height: var(--h2-line-height);
    --ir-cta-h2-letter-spacing: var(--h2-letter-spacing);
    --ir-cta-h2-mobile-size: var(--h2-mobile-size);
    --ir-cta-h2-mobile-line-height: var(--h2-mobile-line-height);
    --ir-cta-h2-mobile-letter-spacing: var(--h2-mobile-letter-spacing);

    /* ##Page Banner Alignment */
    --page-banner-alignment: start;
    --row-page-banner-alignment: flex-start;

    /* ----------------------------- */  
    /* ?FORMS                        */
    /* ----------------------------- */

    /* ##Form Colors */
    --color-form-border: #7D6B5C;
    --color-form-error-text: #d40033;
    --color-form-border-dark: #fa003a;
    --color-checkbox-border: #7D6B5C;
    --color-checkbox-active: var(--color-accent-secondary);
    --color-check: var(--color-text);
    --color-checkbox-border-dark: var(--color-text-darkbg);
    --color-check-dark: var(--color-text-darkbg);

    /* ##Text */
    --checkbox-label-font-size: 13px;
    --checkbox-label-font-weight: 400;

    /* ##Elements */
    --form-input-border-radius: 0;
    --checkbox-height: 12px;
    --checkbox-width: 12px;

    /* ##Form Labels */
    --form-label-font-size: 0.875rem;
    --form-label-line-height: 1.125rem;
    --form-label-letter-spacing: 0.0175rem;
    --form-label-font-weight: 400;
    --form-label-font-family: var(--font-stack-primary);
    --form-label-margin-bottom: 0.5rem;
    --form-label-mobile-font-size: 0.75rem;

    /* ##Form Inputs */
    --form-input-height: 53px;
    --form-input-font-size: 12px;
    --form-input-font-weight: 400;
    --form-input-margin-top: 5px;
    --form-input-margin-bottom: 20px;
    --form-input-border-width: 0.5px;
    --form-input-padding: 8px;

    /* ----------------------------- */
    /* ?LIST ITEMS                   */
    /* ----------------------------- */
    --ul-before-color: var(--color-accent-primary);
    --ul-before-size: 1em;
    --ol-before-color: var(--color-accent-primary);
    --ol-before-size: 1em;

    /* ----------------------------- */
    /* ?CHARTS - QMOD                */
    /* ----------------------------- */

    /* ##Default */
    --color-chart-point: var(--color-accent-secondary);
    --color-chart-graph: var(--color-accent-secondary);
    --color-chart-bars: var(--color-accent-secondary);
    --color-chart-markers: var(--color-accent-secondary);

    /* ##Dark */
    --color-dark-chart-point: #00d6e6;
    --color-dark-chart-graph: #5ea4ce;
    --color-dark-chart-bars: #00d6e6;
    --color-dark-chart-markers: #5ea4ce;

    /* ----------------------------- */
    /* ?CHARTS - CHART LIBRARY       */
    /* ----------------------------- */

    /* ##Elements */
    --chart-axis-label-color: #333333;
    --chart-axis-line-color:  #DCDCDC;
    --chart-grid-line-color:  #DCDCDC;
}