:root {
  /* Primary */
  --color-primary-50: #F4FDFF;
  --color-primary-100: #DFF4FF;
  --color-primary-200: #A6E3FA;
  --color-primary-300: #58BFE5;
  --color-primary-400: #41B5E5;
  --color-primary-500: #2EA8E1;
  --color-primary-600: #289BD3;
  --color-primary-700: #2188C0;
  --color-primary-800: #1E77AC;
  --color-primary-900: #15578A;
  --color-primary-main: var(--color-primary-400);

  /* Grey */
  --color-grey-50: #F1F5F8;
  --color-grey-100: #DDE8EF;
  --color-grey-200: #B2CDDF;
  --color-grey-300: #739CB7;
  --color-grey-400: #5986A4;
  --color-grey-500: #3D7291;
  --color-grey-600: #306480;
  --color-grey-700: #21506A;
  --color-grey-800: #133E55;
  --color-grey-900: #002A3D;
  --color-grey-main: var(--color-grey-500);

    /* Text */
  --color-text-primary: #272930;
  --color-text-secondary: #739CB7;
  --color-text-tertiary: #B2CDDF;

  /* Error */
  --color-error-main: #FF210C;

  /* Success */
  --color-success-main: #81C454;

  /* Warning */
  --color-warning-main: #FD9D3C;

  /* Common */
  --color-black: #000;
  --color-white: #fff;
}