:root {
    /*
     * Design tokens mapped from Figma **Styles Sheet** frame (node 8272:13045),
     * Nike IR 5 / A 4 file. Re-sync after Eq Variables plugin runs.
     */

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

    /* ##Primary — Figma Primary/100, Primary/50 */
    --color-accent-primary: #111111;
    --color-accent-primary-50: #888888;
    --color-accent-primary-dark: #000000;
    --color-accent-primary-darker: #000000;

    /* ##Secondary — Figma Secondary/100, Secondary/50 */
    --color-accent-secondary: #757575;
    --color-accent-secondary-50: #bababa;

    /* ##Tertiary — Figma Tertiary/100, Tertiary/50 */
    --color-accent-tertiary: #cccccc;
    --color-accent-tertiary-50: #e5e5e5;

    /* ##Accents — Figma Accent/1, Accent/2; tertiary line for third tone */
    --color-accent-1: #2d2d2d;
    --color-accent-2: #949494;
    --color-accent-3: #cccccc;

    /* ##Common — Figma Common/* + common/black */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-neutral: #f3f3f3;
    --color-border: #dcdcdc;
    --color-overlay: #000;
    --overlay-opacity: 0.6;
    --overlay-opacity-light: 0.8;
    --overlay-opacity-lighter: 0.3;
    --overlay-opacity-darker: 0.75;

    /* ##Headings — Figma Common/Text colors (h1 token is for dark surfaces; main content uses #111111) */
    --color-h1: #111111;
    --color-h2: #111111;
    --color-h3: #111111;
    --color-h-sub: #111111;

    /* ##Body — Figma Common/Text colors/body text */
    --color-text: #707070; 
    --color-text-darkbg: #fff;

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

    /* ##Fonts — Figma Body/Nav Helvetica Neue; display Nike Futura ND (add @font-face when font files licensed); charts keep Mulish */
    --font-stack-primary: 'Helvetica Neue', sans-serif;
    --font-stack-secondary: 'Nike Futura ND', sans-serif;
    --font-stack-charts: 'Mulish', sans-serif;

    /* ##H1 — between Figma Header/small (26) and interior banner scale; weight matches Futura Cn XBold */
    --h1-size: 120px;
    --h1-font-weight: 800;
    --h1-mobile-size: 30px;

    /* ##H2 — Figma Header/medium */
    --h2-size: 36px;
    --h2-font-weight: 500;
    --h2-separation-distance: 50px;
    --h2-mobile-size: 26px;

    /* ##H3 */
    --h3-size: 26px;
    --h3-font-weight: 500;
    --h3-mobile-size: 22px;

    /* ##H4 — Figma Subheader/large */
    --h4-size: 20px;
    --h4-font-weight: 500;
    --h4-mobile-size: 18px;

    /* ##H5 — Figma Subheader/medium */
    --h5-size: 16px;
    --h5-font-weight: 500;
    --h5-mobile-size: 14px;

    /* ##H6 — Figma Subheader/small */
    --h6-size: 14px;
    --h6-font-weight: 500;
    --h6-mobile-size: 12px;

    /* ##Body Styles — Figma Body/large, Body/medium, Body/small, Body/xsmall */
    --large-body: 20px;
    --large-weight: 400;
    --large-height: 1.6;

    --medium-body: 18px;
    --medium-weight: 400;
    --medium-height: 1.5;

    --small-body: 16px;
    --small-weight: 400;
    --small-height: 1.5;

    --x-small-body: 14px;
    --x-small-weight: 400;
    --x-small-height: 1.5;

    /* ##Date and Time Styles — Figma Common small/datetime */
    --date-time-size: 14px;
    --date-time-weight: 500;
    --date-time-font-family: var(--font-stack-primary);
    --date-time-color: var(--color-text);
    --date-time-transform: none;

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

    /* ##Metric Styles — Figma Metric/small (32) / scale down for compact UI */
    --metric-small: 32px;
    --metric-xsmall: 12px;

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

    /* ##Button Default */
    --button-background: var(--color-accent-primary);
    --button-border-width: 1px;
    --button-border-color: var(--color-accent-primary);
    --button-border-radius: 88px;
    --button-color: var(--color-white);
    --button-font-size: 16px;
    --button-font-weight: 500;
    --button-font-family: var(--font-stack-primary);
    --button-padding-tb: 8px;
    --button-padding-lr: 16px;
    --button-letter-spacing: 0;
    --button-icon-size: 24px;
    --button-icon-weight: normal;

    /* ##Button Default Hover */
    --button-hover-color: var(--color-accent-primary);
    --button-hover-background: transparent;
    --button-hover-border-width: 1px;
    --button-hover-border-color: var(--color-accent-primary);

    /* ##Dark */
    --button-dark-background: #fff;
    --button-dark-border-width: 1px;
    --button-dark-border-color: #fff;
    --button-dark-color: var(--color-accent-primary);

    /* ##Dark Hover */
    --button-dark-hover-background: transparent;
    --button-dark-hover-border-width: 1px;
    --button-dark-hover-border-color: #fff;
    --button-dark-hover-color: #fff;

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

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

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

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

    /* ##Text Links Default */
    --color-link: var(--color-accent-primary);

    /* ##Text Links Hover */
    --color-link-hover: var(--color-accent-primary);

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

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

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

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

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

    /* ##Table Headings */
    --table-heading-background: var(--color-accent-primary);
    --table-heading-padding-tb: 10px;
    --table-heading-padding-lr: 18px;
    --table-heading-size: 14px;
    --table-heading-font-weight: 500;
    --table-heading-color: #fff;
    --table-heading-text-transform: none;

    /* ##Table Data */
    --table-data-background: #fff;
    --table-data-padding: 20px;
    --table-data-size: 16px;
    --table-data-color: var(--color-text);

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

    /* ----------------------------- */
    /* ?GENERAL                      */
    /* ----------------------------- */
    --body-top-padding: 112px;
    --body-font-size: var(--medium-body);
    --body-font-weight: var(--medium-weight);
    --body-line-height: var(--medium-height);
    --main-content-margin-tb: 60px;
    --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-1);
    --zero-nav-padding-top: 4px;
    --zero-nav-padding-right: 0;
    --zero-nav-padding-bottom: 4px;
    --zero-nav-padding-left: 0;
    --zero-nav-color: #E1E1E1;
    --zero-nav-active-color: #E1E1E1;

    /* ##Main Background */
    --header-bg: var(--color-accent-primary);
    --header-bg-affixed: var(--color-accent-primary);

    /* ##Main Font */
    --nav-font-family: var(--font-stack-primary);
    --nav-font-size: 16px;
    --nav-font-weight: 500;
    /* Figma “Nav - Top…” letter-spacing (~0.16px); tune in em — FIGMA_AUDIT §19 */
    --nav-letter-spacing: -0.02em;
    --zero-nav-letter-spacing: 0;
    --header-bar-min-height: 80px;
    --nav-text-transform: none;
    --nav-color: #fff;
    --nav-color-hover: var(--color-white);
    --nav-color-active: var(--color-white);
    --nav-accent-color: var(--color-white);

    /* ##Main Spacing */
    --main-menu-top-position: 23px;
    --nav-padding-top: 0;
    --nav-padding-right: 6px;
    --nav-padding-bottom: 25px;
    --nav-padding-left: 18px;
    --nav-inline-padding: 19px;
    --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: 50px;
    --nav-dropdown-bg: #fff;
    --nav-dropdown-font-weight: 500;
    --nav-dropdown-font-size: 16px;
    --nav-dropdown-text-transform: none;
    --nav-dropdown-color: var(--color-accent-primary);
    --nav-dropdown-color-hover: var(--color-accent-primary);
    --nav-dropdown-hover-background-color: rgba(17, 17, 17, 0);
    --nav-dropdown-shadow: 0px 5px 7px 0px #939393;

    /* ##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: 19.5px;
    --mobile-trigger-color: #ffffff;
    --mobile-trigger-background-color: var(--color-accent-primary);

    /* ----------------------------- */
    /* ?SUB NAVIGATION               */
    /* ----------------------------- */
    --sub-nav-top-position: 111px;
    --sub-nav-background: var(--color-accent-1);
    --sub-nav-link-font-size: 16px;
    --sub-nav-link-font-family: var(--font-stack-primary);
    --sub-nav-link-color: var(--color-accent-2);
    --sub-nav-link-hover-background: rgba(0, 0, 0, 0);
    --sub-nav-active-link-color: #fff;
    --sub-nav-link-font-weight: 500;
    --sub-nav-link-text-transform: none;

    /* ##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-primary);
    --tertiary-nav-link-color-active: var(--color-accent-primary);
    --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-accent-primary);
    --quick-links-padding-tb: 16px;
    --quick-links-padding-lr: 24px;
    --quick-links-font-size: 16px;
    --quick-links-font-weight: 500;
    --quick-links-font-family: var(--font-stack-primary);
    --quick-links-color: #E1E1E1;
    --quick-links-color-hover: #E1E1E1;
    --quick-links-icon-size: 16px;
    --quick-links-icon-color: #E1E1E1;

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

    /* ##Footer Links */
    --footer-bg: var(--color-accent-primary);
    --footer-color: #fff;
    --footer-font-size: 16px;

    /* ##Social Icons */
    --social-icon-bg: var(--color-accent-1);
    --social-icon-hover-bg: #fff;
    --social-icon-color: var(--color-white);
    --social-icon-hover-color: var(--color-accent-primary);
    --social-icon-width: 29px;
    --social-icon-height: 29px;

    /* ##QMod */
    --qmod-background: var(--color-accent-primary);
    --qmod-color: #7C7C7C;
    --qmod-font-size: 14px;

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

    /* ##Homepage */
    --home-banner-height: 510px;
    --home-page-banner-h2-color: #fff;
    --home-page-banner-h2-size: 130px;
    --home-page-banner-h2-font-weight: 800;
    --home-page-banner-subtitle-color: #fff;
    --home-page-banner-subtitle-size: 18px;
    --home-page-banner-subtitle-weight: 400;

    /* ##Interior Banner */
    --interior-banner-height: 510px;
    --interior-banner-mobile-height: 300px;
    --interior-page-banner-h1-color: #fff;
    --interior-page-banner-h1-size: 120px;
    --interior-page-banner-h1-font-weight: 800;
    --interior-page-banner-subtitle-color: #fff;
    --interior-page-banner-subtitle-size: 18px;
    --interior-page-banner-subtitle-weight: 700;

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

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

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

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

    /* ##Form Colors — Figma Common/Probably won't update/form stroke + error red */
    --color-form-border: #8a8a8a;
    --color-form-error-text: #d93349;
    --color-form-border-dark: #d93349;
    --color-checkbox-border: var(--color-text);
    --color-checkbox-active: var(--color-accent-primary);
    --color-check: var(--color-white);
    --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: 8px;
    --checkbox-height: 16px;
    --checkbox-width: 16px;

    /* ##Form Labels — Figma Common small/text input label */
    --form-label-font-size: 14px;
    --form-label-font-weight: 700;
    --form-label-font-family: var(--font-stack-primary);
    --form-label-margin-bottom: 0.5rem;

    /* ##Form Inputs */
    --form-input-height: 53px;
    --form-input-font-size: 16px;
    --form-input-font-weight: 400;
    --form-input-margin-top: 5px;
    --form-input-margin-bottom: 20px;
    --form-input-border-width: 1px;
    --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-primary);
    --color-chart-graph: var(--color-accent-secondary);
    --color-chart-bars: var(--color-accent-primary);
    --color-chart-markers: var(--color-accent-secondary);

    /* ##Dark — grayscale on dark QMod (Figma Primary/50, Accent/2) */
    --color-dark-chart-point: #888888;
    --color-dark-chart-graph: #949494;
    --color-dark-chart-bars: #888888;
    --color-dark-chart-markers: #bababa;

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

    /* ##Elements */
    --chart-axis-label-color: #111111;
    --chart-axis-line-color: #c8c8c8;
    --chart-grid-line-color: #c8c8c8;
}
