:root {
  --spacing-xs: 0.25rem; //4px
  --spacing-s: 0.5rem; //8px
  --spacing-m: 0.75rem; //12px
  --spacing-l: 1rem; //16px
  --spacing-xl: 1.5rem; //24px
  --spacing-2xl: 2rem; //32px
  --spacing-3xl: 3rem; //48px

  --theme-color-black-rgb: 29, 24, 24;
  --theme-color-black: #1d1818;
  --theme-color-white: #fff;
  --theme-color-grey-1: #3c3c3c;
  --theme-color-grey-2: #bdbdbd;
  --theme-color-grey-3: #d3d3d3;
  --theme-color-grey-4: #f0f0f0;
  --theme-color-grey-5: #f5f5f5;
  --theme-color-grey-6: #fafafa;
  --theme-color-grey-7: #efefef;
  --theme-color-grey-8: #e5e5e5;
  --theme-color-grey-9: #8a8a8a;
  --theme-color-grey-10: #595959;
  --theme-color-red: #f00;
  --theme-color-green: #2b8402;

  --theme-font-family: SourceSansPro, Arial, Helvetica, sans-serif;
  --theme-font-base-size: 1rem;
}