/* CSS Variables used in SDK components */
:root {
  --app-font-family: 'Source Sans 3', Verdana, Arial, sans-serif;
  --app-primary-color: var(--Navy-600);
  --app-primary-dark-color: var(--Navy-800);
  --app-primary-light-color: var(--Navy-300);
  --app-secondary-color: var(--Yellow-400);
  --app-neutral-color: var(--Slate-600);
  --app-neutral-light-color: var(--Slate-300);
  --app-neutral-dark-color: var(--Slate-800);
  --app-error-color: var(--Red-500);
  --app-error-light-color: var(--Red-300);
  --app-error-dark-color: var(--Red-700);
  --app-warning-color: var(--Yellow-400);
  --app-warning-color-light: var(--Yellow-200);
  --app-warning-color-dark: var(--Yellow-700);
  --app-background-color: var(--Slate-100);
  --app-form-color: white;

  /* svg filter colors that match above, go here to generate https://codepen.io/sosuke/pen/Pjoqqp */
  /* replaced 3 filters when the primary, primary-dark, and primary-light were updated above
  --app-primary-color-filter: invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%);
  --app-primary-dark-color-filter: invert(19%) sepia(20%) saturate(6809%) hue-rotate(242deg) brightness(100%) contrast(106%);
  --app-secondary-color-filter: invert(83%) sepia(31%) saturate(4626%) hue-rotate(360deg) brightness(103%) contrast(104%);
  */
  --app-primary-color-filter: invert(37%) sepia(58%) saturate(6604%) hue-rotate(201deg) brightness(106%) contrast(103%);
  --app-primary-dark-color-filter: invert(17%) sepia(54%) saturate(6351%) hue-rotate(208deg) brightness(87%) contrast(119%);
  --app-secondary-color-filter: invert(64%) sepia(14%) saturate(7498%) hue-rotate(177deg) brightness(99%) contrast(105%);

  --app-neutral-color-filter: invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%);
  --app-neutral-light-color-filter: invert(69%) sepia(74%) saturate(0%) hue-rotate(205deg) brightness(102%) contrast(103%);
  --app-white-color-filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);

  /* FAA Color System */
  --Slate-100: #FFFFFF;
  --Slate-200: #F2F2F2;
  --Slate-300: #E0E0E0;
  --Slate-400: #C2C2C2;
  --Slate-500: #999999;
  --Slate-600: #666666;
  --Slate-700: #333333;
  --Slate-800: #1F1F1F;
  --Slate-900: #141414;

  --Navy-100: #D9E2ED;
  --Navy-200: #B2C5DC;
  --Navy-300: #809EC5;
  --Navy-400: #406EA7;
  --Navy-500: #003E8A;
  --Navy-600: #00326E;
  --Navy-700: #002F4D;
  --Navy-800: #00262E;
  --Navy-900: #001937;

  --Blue-100: #D9EAF6;
  --Blue-200: #B2D6EC;
  --Blue-300: #80BADF;
  --Blue-400: #4098D0;
  --Blue-500: #0076C0;
  --Blue-600: #005E9A;
  --Blue-700: #004773;
  --Blue-800: #002553;
  --Blue-900: #001826;

  --Cyan-100: #D9F5FB;
  --Cyan-200: #B3ECF8;
  --Cyan-300: #80DFF3;
  --Cyan-400: #41CFED;
  --Cyan-500: #02BFE7;
  --Cyan-600: #0299B9;
  --Cyan-700: #01738B;
  --Cyan-800: #014C5C;
  --Cyan-900: #00326E;

  --Green-100: #E3F1E3;
  --Green-200: #C6E3C7;
  --Green-300: #A0D0A1;
  --Green-400: #71B972;
  --Green-500: #41A143;
  --Green-600: #348136;
  --Green-700: #276128;
  --Green-800: #1A401B;
  --Green-900: #0D200D;

  --Yellow-100: #F9F2DB;
  --Yellow-200: #F2E5B8;
  --Yellow-300: #EAD388;
  --Yellow-400: #DFBE4D;
  --Yellow-500: #D5A811;
  --Yellow-600: #AA860E;
  --Yellow-700: #80650A;
  --Yellow-800: #554307;
  --Yellow-900: #2B2203;

  --Red-100: #F6DEDE;
  --Red-200: #EDBCBE;
  --Red-300: #E18F92;
  --Red-400: #D2585C;
  --Red-500: #C32026;
  --Red-600: #9C1A1E;
  --Red-700: #751317;
  --Red-800: #4E0D0F;
  --Red-900: #270608;

  --Special-midnight: #000C1C;
  --Special-charcoal: #292929;


  /* App Navigation */
  --app-nav-bg: #262626;  /*!default*/
  --app-nav-color: #d9d9d9; /* invert( var(--app-nav-bg)) !default */
  --app-nav-width: 13rem; /*!default*/
  /* $app-nav-width: 15.625rem !default; */
  --app-nav-width-expanded: 13rem /*!default*/;

  /* Things related to movement - migrated from NavBar */
  --transition-slow: 0.5s; /*!default */
  --transition-medium: 0.3s; /*!default */
  --transition-fast: 0.1s;  /*!default */
  --natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1); /*!default */

  /* Some standard values for typography */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-normal: 400;
  --header-5-size: 20px;
  --header-5-weight: 600;
  --header-5-height: 25px;

}