@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root,
:host,
.terra-theme-horizon {
    color-scheme: normal light;

    /* Horizon Design System */

    /* HDS Colors

    /* Primary Palette
     * Our primary palette consists of black, white, red, and blue. These colors are used in 
     * logical ways throughout the site to highlight actions when they are important. We use 
     * a restricted palette to give attention and hierarchy to our content without distraction.
     */
    --terra-color-carbon-black: hsla(0, 0%, 0%, 1);
    --terra-color-spacesuit-white: hsla(0, 100%, 100%, 1);
    --terra-color-nasa-red: hsla(3, 91%, 59%, 1);
    --terra-color-nasa-blue: hsla(217, 78%, 50%, 1);

    /* Extended Palette 
     * The extended palette consists of a tint and shade for the brand colors in the primary palette. 
     * Usage of these colors varies depending on the touch point, but they come in handy to ensure that your combinations are always AAA accessible. 
     */
    --terra-color-nasa-red-tint: hsla(3, 100%, 66%, 1);
    --terra-color-nasa-red-shade: hsla(357, 99%, 36%, 1);
    --terra-color-nasa-blue-tint: hsla(212, 100%, 58%, 1);
    --terra-color-nasa-blue-shade: hsla(218, 86%, 31%, 1);
    --terra-color-nasa-blue-dark: hsla(214, 52%, 24.5%, 1);

    /* Additional Colors 
     * International Orange and Active Green are colors that are used sparingly and intentionally.
     */
    --terra-color-international-orange: hsla(23, 83%, 53%, 1);
    --terra-color-international-orange-tint: hsl(23, 82%, 61%);
    --terra-color-international-orange-shade: hsla(24, 90%, 32%, 1);
    --terra-color-active-green: hsla(145, 67%, 57%, 1);
    --terra-color-active-green-tint: hsl(145, 52%, 64%, 1);
    --terra-color-active-green-shade: hsla(144, 75%, 38%, 1);

    /* Neutrals
     * Neutrals have varying degrees of value that allow for the appropriate levels of contrast across the system. 
     * Typically, they are used for text and subtle backgrounds to de-emphasize a piece of secondary content. 
     */
    --terra-color-carbon-90: hsla(240, 8%, 10%, 1);
    --terra-color-carbon-80: hsla(240, 4%, 19%, 1);
    --terra-color-carbon-70: hsla(240, 2%, 27%, 1);
    --terra-color-carbon-60: hsla(240, 2%, 35%, 1);
    --terra-color-carbon-50: hsla(240, 1%, 47%, 1);
    --terra-color-carbon-40: hsla(240, 2%, 59%, 1);
    --terra-color-carbon-30: hsla(240, 1%, 73%, 1);
    --terra-color-carbon-20: hsla(0, 0%, 82%, 1);
    --terra-color-carbon-10: hsla(0, 0%, 89%, 1);
    --terra-color-carbon-5: hsl(0, 0%, 96%, 1);

    /* Button BG colors TESTED for AA Accessibility of large text & graphical objects.
    /* HDS colors failed tests when using white text on buttons. If we use dark text we can use original HDS colors.
     */
    --terra-color-success-green: hsl(145, 67%, 40%);
    --terra-color-success-green-hover: hsl(145, 67%, 30%);
    --terra-color-success-green-focus: hsl(145, 52%, 54%);

    /* Default Button Color - not a defined color in the HDS theme
     */
    --terra-color-default-gray: hsla(240, 13%, 66%, 1);
    --terra-color-default-gray-tint: hsla(240, 2%, 59%, 1);
    --terra-color-default-gray-shade: hsl(240, 9%, 40%, 1);

    /* HDS button styles
    */
    --terra-button-border-width: 1px;

    --terra-button-font-size-small: var(--terra-font-size-x-small);
    --terra-button-font-size-medium: var(--terra-font-size-small);
    --terra-button-font-size-large: var(--terra-font-size-medium);

    --terra-button-height-small: 1.875rem; /* 30px */
    --terra-button-height-medium: 2.25rem; /* 36px */
    --terra-button-height-large: 3rem; /* 48px */

    --terra-button-outline-text-color: var(--terra-color-carbon-black);
    --terra-button-text-text-color: var(--terra-color-nasa-blue);
    --terra-button-text-text-color-hover: var(--terra-color-nasa-blue-shade);
    --terra-button-page-link-text-color: var(--terra-color-carbon-black);

    /*
    * Border radii
    */

    --terra-border-radius-small: 0.125rem; /* 2px */
    --terra-border-radius-medium: 0.25rem; /* 4px */
    --terra-border-radius-large: 0.5rem; /* 8px */
    --terra-border-radius-x-large: 1rem; /* 16px */

    /* Icon sizes */
    --terra-icon-small: 1.2rem; /* 19px */
    --terra-icon-medium: 1.75rem; /* 50px */
    --terra-icon-large: 2.2rem; /* 68px */
    --terra-icon-x-large: 3rem; /* 76px */

    /*
    * Theme Tokens
    */

    --terra-border-radius-circle: 50%;

    /*
   * Elevations
   */

    --terra-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
    --terra-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
    --terra-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
    --terra-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
    --terra-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);

    /*
   * Spacings
   */

    --terra-spacing-3x-small: 0.125rem; /* 2px */
    --terra-spacing-2x-small: 0.25rem; /* 4px */
    --terra-spacing-x-small: 0.5rem; /* 8px */
    --terra-spacing-small: 0.75rem; /* 12px */
    --terra-spacing-medium: 1rem; /* 16px */
    --terra-spacing-large: 1.25rem; /* 20px */
    --terra-spacing-x-large: 1.75rem; /* 28px */
    --terra-spacing-2x-large: 2.25rem; /* 36px */
    --terra-spacing-3x-large: 3rem; /* 48px */
    --terra-spacing-4x-large: 4.5rem; /* 72px */

    /*
   * Transitions
   */

    --terra-transition-x-slow: 1000ms;
    --terra-transition-slow: 500ms;
    --terra-transition-medium: 250ms;
    --terra-transition-fast: 150ms;
    --terra-transition-x-fast: 50ms;

    /*
   * Typography
   */

    /* Fonts */
    --terra-font-family--inter: 'Inter', sans-serif;
    --terra-font-family--public-sans: 'Public Sans', sans-serif;
    --terra-font-family--dm-mono: 'DM Mono', monospace;

    /* Font sizes */
    --terra-font-size-2x-small: 0.625rem; /* 10px */
    --terra-font-size-x-small: 0.75rem; /* 12px */
    --terra-font-size-small: 0.875rem; /* 14px */
    --terra-font-size-medium: 1rem; /* 16px */
    --terra-font-size-large: 1.25rem; /* 20px */
    --terra-font-size-x-large: 1.5rem; /* 24px */
    --terra-font-size-2x-large: 2.25rem; /* 36px */
    --terra-font-size-3x-large: 3rem; /* 48px */
    --terra-font-size-4x-large: 4.5rem; /* 72px */

    /* Font weights */
    --terra-font-weight-light: 300;
    --terra-font-weight-normal: 400;
    --terra-font-weight-semibold: 600;
    --terra-font-weight-bold: 700;

    /* Letter spacings */
    --terra-letter-spacing-denser: -0.03em;
    --terra-letter-spacing-dense: -0.015em;
    --terra-letter-spacing-normal: normal;
    --terra-letter-spacing-loose: 0.075em;
    --terra-letter-spacing-looser: 0.15em;

    /* Line heights */
    /* This is the range of line heights I found in the HDS Guide specified in percentages. Percentage values may produce unexpected results. 
       HDS uses many values for the typography which makes it difficult to translate to readable variable names.  
        110%;
        118.182%;
        125%;
        130%;
        133.333%;
        135.714%;
        142.857%;
        172.727%;
        181.818%; 
    */

    --terra-line-height-denser: 1;
    --terra-line-height-dense: 1.4;
    --terra-line-height-normal: 1.8;
    --terra-line-height-loose: 2.2;
    --terra-line-height-looser: 2.6;

    /* Focus rings */
    --terra-focus-ring-color: var(--terra-color-primary-600);
    --terra-focus-ring-style: solid;
    --terra-focus-ring-width: 3px;
    --terra-focus-ring: var(--terra-focus-ring-style) var(--terra-focus-ring-width)
        var(--terra-focus-ring-color);
    --terra-focus-ring-offset: 1px;

    /*
   * Forms
   */

    /* Inputs */
    --terra-input-height-small: 1.875rem; /* 30px */
    --terra-input-height-medium: 2.5rem; /* 40px */
    --terra-input-height-large: 3.125rem; /* 50px */

    --terra-input-font-family: var(--terra-font-family--public-sans);
    --terra-input-font-size: var(--terra-font-size-small);
    --terra-input-color: hsla(
        240,
        4%,
        19%,
        1
    ); /* Use same color for both light & dark theme - don't tie to Neutrals scale */
    --terra-input-font-weight: var(--terra-font-weight-normal);
    --terra-input-line-height: var(--terra-line-height-loose);
    --terra-input-border-color: var(--terra-color-carbon-20);
    --terra-input-background-color: var(--terra-color-spacesuit-white);
    --terra-input-border-width: 2px;
    --terra-input-border-radius: var(--terra-border-radius-medium);

    --terra-input-background-color-hover: var(--terra-input-background-color);
    --terra-input-background-color-focus: var(--terra-input-background-color);
    --terra-input-background-color-disabled: var(--terra-color-carbon-10);
    --terra-input-border-color-hover: var(--terra-color-carbon-40);
    --terra-input-border-color-focus: var(--terra-color-primary-50);
    --terra-input-border-color-disabled: var(--terra-color-carbon-30);

    --terra-input-required-content: '*';
    --terra-input-required-content-offset: -2px;
    --terra-input-required-content-color: var(--terra-input-label-color);

    --terra-input-border-radius-small: var(--terra-border-radius-medium);
    --terra-input-border-radius-medium: var(--terra-border-radius-medium);
    --terra-input-border-radius-large: var(--terra-border-radius-medium);

    --terra-input-font-weight: var(--terra-font-weight-normal);
    --terra-input-font-size-small: var(--terra-font-size-small);
    --terra-input-font-size-medium: var(--terra-font-size-medium);
    --terra-input-font-size-large: var(--terra-font-size-large);
    --terra-input-letter-spacing: var(--terra-letter-spacing-normal);

    --terra-input-color-hover: var(--terra-color-carbon-70);
    --terra-input-color-focus: var(--terra-color-carbon-70);
    --terra-input-color-disabled: var(--terra-color-carbon-90);
    --terra-input-icon-color: var(--terra-color-carbon-50);
    --terra-input-icon-color-hover: var(--terra-color-carbon-60);
    --terra-input-icon-color-focus: var(--terra-color-carbon-60);
    --terra-input-placeholder-color: var(--terra-color-carbon-50);
    --terra-input-placeholder-color-disabled: var(--terra-color-carbon-60);
    --terra-input-spacing-small: var(--terra-spacing-small);
    --terra-input-spacing-medium: var(--terra-spacing-medium);
    --terra-input-spacing-large: var(--terra-spacing-large);

    --terra-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
    --terra-input-focus-ring-offset: 0;

    --terra-input-filled-background-color: var(--terra-color-carbon-10);
    --terra-input-filled-background-color-hover: var(--terra-color-carbon-10);
    --terra-input-filled-background-color-focus: var(--terra-color-carbon-10);
    --terra-input-filled-background-color-disabled: var(--terra-color-carbon-10);
    --terra-input-filled-color: var(--terra-color-carbon-80);
    --terra-input-filled-color-hover: var(--terra-color-carbon-80);
    --terra-input-filled-color-focus: var(--terra-color-carbon-70);
    --terra-input-filled-color-disabled: var(--terra-color-carbon-80);

    /* Labels */

    --terra-input-label-font-family: var(--terra-font-family--inter);
    --terra-input-label-font-size: var(--terra-font-size-small);
    --terra-input-label-color: var(--terra-color-carbon-80);
    --terra-input-label-line-weight: var(var(--terra-font-weight-semibold));
    --terra-input-label-line-height: var(--terra-line-height-looser);

    /* Map Component */

    --terra-map-background-color: var(--terra-color-carbon-5);
    --terra-map-border-color: var(--terra-color-carbon-20);

    /* Help text */
    --terra-input-help-text-font-size-small: var(--terra-font-size-x-small);
    --terra-input-help-text-font-size-medium: var(--terra-font-size-small);
    --terra-input-help-text-font-size-large: var(--terra-font-size-medium);
    --terra-input-help-text-color: var(--terra-color-carbon-50);

    /* Toggles (checkboxes, radios, switches) */
    --terra-toggle-size-small: 0.875rem; /* 14px */
    --terra-toggle-size-medium: 1.125rem; /* 18px */
    --terra-toggle-size-large: 1.375rem; /* 22px */

    /*
   * Overlays
   */

    --terra-overlay-background-color: hsl(240 3.8% 46.1% / 33%);

    /*
   * Panels
   */

    --terra-panel-background-color: var(--terra-color-spacesuit-white);
    --terra-panel-border-color: var(--terra-color-carbon-20);
    --terra-panel-border-width: 1px;

    /*
   * Tooltips
   */

    --terra-tooltip-border-radius: var(--terra-border-radius-medium);
    --terra-tooltip-background-color: var(--terra-color-carbon-80);
    --terra-tooltip-color: var(--terra-color-spacesuit-white);
    --terra-tooltip-font-family: var(--terra-font-family--public-sans);
    --terra-tooltip-font-weight: var(--terra-font-weight-normal);
    --terra-tooltip-font-size: var(--terra-font-size-small);
    --terra-tooltip-line-height: var(--terra-line-height-looser);
    --terra-tooltip-padding: var(--terra-spacing-2x-small)
        var(--terra-spacing-x-small);
    --terra-tooltip-arrow-size: 6px;

    /*
   * Z-indexes
   */

    --terra-z-index-drawer: 700;
    --terra-z-index-dialog: 800;
    --terra-z-index-dropdown: 900;
    --terra-z-index-toast: 950;
    --terra-z-index-tooltip: 1000;
}
