:root {
  --color-grey-10: #FBFCFD;
  --color-grey-20: #E5E5E5;
  --color-grey-30: #DDDDDD;
  --color-grey-40: #CCCCCC;
  --color-grey-50: #979797;
  --color-grey-60: #7F7F7F;
  --color-grey-70: #636363;
  --color-grey-75: #565656;
  --color-grey-80: #3C3C3C;
  --color-grey-90: #333333;
  --color-grey-100: #292929;

  --color-coolgrey-10: #F4F6F8;
  --color-coolgrey-20: #E8ECF0;
  --color-coolgrey-25: #D7DDE4;
  --color-coolgrey-30: #B7BCC7;
  --color-coolgrey-40: #AAADB7;
  --color-coolgrey-50: #989BA5;
  --color-coolgrey-60: #6C707E;
  --color-coolgrey-70: #4E5264;
  --color-coolgrey-80: #3E4457;
  --color-coolgrey-90: #2E3243;
  --color-coolgrey-100: #222635;

  --color-navy-1: #E5EAEE;
  --color-navy-5: #9FB3C4;
  --color-navy-10: #8CA0B3;
  --color-navy-20: #596079;
  --color-navy-30: #494F65;
  --color-navy-40: #3B3F53;
  --color-navy-50: #32374C;
  --color-navy-60: #2A2F44;
  --color-navy-70: #222635;
  --color-navy-80: #1B1F2D;
  --color-navy-90: #141B2E;

  --color-green-10: #E5FAE2;
  --color-green-20: #98CA8F;
  --color-green-30: #72B767;
  --color-green-40: #68B44D;
  --color-green-50: #569E4B;
  --color-green-60: #45803C;
  --color-green-70: #45C583;
  --color-green-80: #48C45E;
  --color-green-90: #316654;

  --color-blue-10: #EDF4FA;
  --color-blue-20: #87D7FE;
  --color-blue-25: #4CC5FA;
  --color-blue-30: #44C0FE;
  --color-blue-40: #07ABFE;
  --color-blue-50: #018CD3;
  --color-blue-60: #005499;
  --color-blue-70: #1F4E75;

  --color-orange-10: #FFF3E6;
  --color-orange-15: #FFCE9A;
  --color-orange-20: #FFA000;
  --color-orange-25: #FF8503;
  --color-orange-30: #FF7F00;
  --color-orange-40: #E67200;
  --color-orange-50: #CF6700;
  --color-orange-60: #7F5026;

  --color-red-10: #F8E9E9;
  --color-red-20: #ED8383;
  --color-red-30: #E23333;
  --color-red-40: #C41C1C;
  --color-red-50: #9E1717;
  --color-red-60: #662A38;
  --color-red-70: #4B303D;

  --color-yellow-10: #FFFBE5;
  --color-yellow-20: #F8F3CC;
  --color-yellow-30: #FDD400;
  --color-yellow-40: #DCC500;
  --color-yellow-50: #C6B100;
  --color-yellow-60: #E7EC06;

  --color-purple-10: #EBEBFF;
  --color-purple-20: #B5B5FB;
  --color-purple-30: #7B61FF;
  --color-purple-40: #6D00BE;
  --color-purple-50: #4B0082;

  --color-white: #FFFFFF;
  --color-black: #000000;

  --theme-color-bg-10: var(--color-navy-50);
  --theme-color-bg-20: var(--color-navy-70);
  --theme-color-text: var(--color-white);
  --theme-color-primary: var(--color-green-30);
}

/* Only used by storybook. Our applications are fullscreen but
this breaks scrolling in storybook so we have to override it */
body {
  overflow: auto !important;
}