:root {
    --hds-breakpoint-tablet: 640px;
    --hds-breakpoint-desktop: 1024px;
    --hds-breakpoint-widescreen: 1400px;

    --hds-color-primary: #f64137;
    --hds-color-nasa-red: #f64137;
    --hds-color-primary-dark: #b60109;
    --hds-color-secondary: #1c67e3;
    --hds-color-secondary-dark: #0b3d91;
    --hds-color-base-darkest: #000000;
    --hds-color-base-lightest: #ffffff;
    --hds-color-active-green: #47da84;
    --hds-color-carbon-90: #17171b;
    --hds-color-carbon-80: #2e2e32;
    --hds-color-carbon-60: #58585b;
    --hds-color-carbon-40: #959599;
    --hds-color-carbon-30: #b9b9bb;
    --hds-color-carbon-20: #d1d1d1;
    --hds-color-carbon-05: #f6f6f6;
    --hds-color-darker: var(--hds-color-carbon-90);
    --hds-color-dark: var(--hds-color-carbon-80);
    --hds-color-mid-darker: var(--hds-color-carbon-60);
    --hds-color-mid-light: var(--hds-color-carbon-40);
    --hds-color-mid-lighter: var(--hds-color-carbon-30);
    --hds-color-mid-lightest: var(--hds-color-carbon-20);
    --hds-color-base-lighter: var(--hds-color-carbon-05);

    --hds-spacing-1: 8px;
    --hds-spacing-2: 16px;
    --hds-spacing-3: 24px;
    --hds-spacing-4: 32px;
    --hds-spacing-6: 48px;
    --hds-spacing-9: 72px;
    --hds-spacing-15: 120px;
    --hds-spacing-30: 240px;

    --hds-font-family-public-sans: "Public Sans Web", Helvetica, Arial, sans-serif;
    --hds-font-family-inter: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --hds-font-family-dm-mono: "Dm Mono", "Consolas", Courier, monospace;

    --hds-font-size-3xs: 12px;
    --hds-font-size-2xs: 14px;
    --hds-font-size-xs: 16px;
    --hds-font-size-sm: 18px;
    --hds-font-size-md: 22px;
    --hds-font-size-lg: 28px;
    --hds-font-size-xl: 36px;
    --hds-font-size-2xl: 48px;
    --hds-font-size-3xl: 80px;
    --hds-font-size-4xl: 120px;

    /* assuming system token names in HDS Core Proposal are also actual weight values */
    --hds-font-weight-light: 300;
    --hds-font-weight-normal: 400;
    --hds-font-weight-medium: 500;
    --hds-font-weight-semibold: 600;
    --hds-font-weight-bold: 700;

    --hds-letter-spacing-neg-7: -5.5px;
    --hds-letter-spacing-neg-6: -4px;
    --hds-letter-spacing-neg-5: -3px;
    --hds-letter-spacing-neg-4: -1.5px;
    --hds-letter-spacing-neg-3: -1px;
    --hds-letter-spacing-neg-2: -0.5px;
    --hds-letter-spacing-neg-1: -0.25px;
    --hds-letter-spacing-auto: 0;
    --hds-letter-spacing-1: 0.25px;
    --hds-letter-spacing-2: 3.5px;

    --hds-line-height-1: 120px;
    --hds-line-height-2: 80px;
    --hds-line-height-3: 48px;
    --hds-line-height-4: 36px;
    --hds-line-height-5: 38px;
    --hds-line-height-6: 32px;
    --hds-line-height-7: 26px;
    --hds-line-height-8: 20px;
    --hds-line-height-9: 15px;
    --hds-line-height-10: 23px;
    --hds-line-height-11: 19px;
    --hds-line-height-12: 26px;
    --hds-line-height-13: 22px;
    --hds-line-height-14: 43px;

    --hds-component-dialog-container-zindex: 10000;
    --hds-component-dialog-zindex: 9000;
}

@font-face {
    font-family: "Public Sans Web";
    font-display: swap;
    src: url("/font/PublicSans_Variable.ttf") format("truetype");
}
@font-face {
    font-family: "Inter";
    font-display: swap;
    src: url("") format("truetype");
}
@font-face {
    font-family:"DM Mono";
    font-display: swap;
    src:url("/font/DMMono-Regular.ttf") format("truetype");
}