:root {
  --font-size-xxl: 32px;
  --font-size-xl: 24px;
  --font-size-l: 18px;
  --font-size: 16px;
  --font-size-s: 14px;
  --font-size-xs: 12px;

  --icon-size-xl: 48px;
  --icon-size-l: 36px;
  --icon-size: 24px;
  --icon-size-s: 18px;
  --icon-size-xs: 16px;

  --spacing-xxl: 32px;
  --spacing-xl: 24px;
  --spacing-l: 16px;
  --spacing: 12px;
  --spacing-s: 8px;
  --spacing-xs: 4px;

  --input-height: 40px;
}

:root {
  /*
    100 - lightest shade
    500 - base color
    900 - darkest shade
  */
  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);
  --color-black-trans: hsla(0, 0%, 0%, 0.6);

  --color-grey-100: hsl(0, 0%, 98%);
  --color-grey-150: hsl(0, 0%, 96%);
  --color-grey-200: hsl(0, 0%, 92%);
  --color-grey-250: hsl(0, 0%, 87%);
  --color-grey-300: hsl(0, 0%, 81%);
  --color-grey-350: hsl(0, 0%, 75%);
  --color-grey-400: hsl(0, 0%, 68%);
  --color-grey-500: hsl(0, 0%, 60%);
  --color-grey-600: hsl(0, 0%, 46%);
  --color-grey-700: hsl(0, 0%, 38%);
  --color-grey-750: hsl(0, 0%, 33%);
  --color-grey-800: hsl(0, 0%, 29%);
  --color-grey-850: hsl(0, 0%, 24%);
  --color-grey-900: hsl(0, 0%, 18%);
  --color-grey-950: hsl(0, 0%, 13%);

  --color-orange-200: hsl(36, 96%, 79%);
  --color-orange-300: hsl(36, 96%, 60%);
  --color-orange-400: hsl(36, 95%, 54%);
  --color-orange-500: hsl(36, 95%, 49%);
  --color-orange-600: hsl(36, 95%, 44%);

  --color-red-200: hsl(0, 43%, 91%);
  --color-red-500: hsl(2, 64%, 58%);
  --color-red-700: hsl(1, 44%, 46%);

  --color-blue-100: hsl(214, 64%, 98%);
  --color-blue-200: hsl(204, 14%, 93%);
  --color-blue-350: hsl(212, 75%, 64%);
  --color-blue-400: hsl(212, 73%, 59%);
  --color-blue-450: hsl(212, 70%, 54%);
  --color-blue-500: hsl(208, 56%, 53%);
  --color-blue-600: hsl(211, 59%, 51%);
  --color-blue-700: hsl(208, 56%, 38%);

  --color-green-400: hsl(138, 46%, 59%);
  --color-green-500: hsl(138, 44%, 52%);
  --color-green-600: hsl(138, 46%, 45%);

  --color-yellow-500: hsl(55, 89%, 50%);
  --color-yellow-600: hsl(55, 89%, 46%);
}