:root {
    //type
    --of--font-family: 'overpass', sans-serif;
    --of--FontSize--xs:  .875rem; //14
    --of--FontSize--sm:  1rem; //16
    --of--FontSize--md:  1.125rem; //18
    --of--FontSize--lg:  1.375rem; //22
    --of--FontSize--xl:  1.5rem;//24
    --of--FontSize--2xl: 2.625rem; //40
  
    //spacers
    --of--spacer--xs:  .25rem; //4  purple
    --of--spacer--sm:  .5rem; //8  light blue
    --of--spacer--md:  1rem; //16  green
    --of--spacer--lg:  1.5rem; //24  yellow
    --of--spacer--xl:  2rem; //32  pink
    --of--spacer--2xl: 3rem; //48 blue
    --of--spacer--3xl:  4rem; //64  purple
  
    //color
    --of--color-brand--50: #73C5C5;
    --of--color-brand--100: #009596;
    --of--color-brand--200: #005F60;
    --of--color-brand--300: #003737;
    --of--color-brand--400: #001F22;
    --of--color-white--100: #FFF;
    --of--color-white--150: #F0F0F0;
    --of--color-white--200: #EDEDED;
    --of--color-blue--100:  #dfe7f4;
    --of--color-blue--200:  #cad3e5;
    --of--color-grey--100:  #979797;
    --of--color-grey--200:  #666;
    --of--color-black--100: #040404;
    --of--color-black--200: #202020;
    --of--color-black--300: #000;
  
    //transparencies
    --of--color-transparent-background--100: rgba(32,32,32,.90);
  
    //borders
    --of--BorderWidth--sm: 2px;
    --of--BorderWidth--lg: 4px;
    --of--BorderRadius--sm: .1875rem;
    --of--BorderRadius--md: .75rem;
    --of--BorderRadius--lg: 40rem;
   
    //text
    --of--Color--100: var(--of--color-white--100);
    --of--Color--200: var(--of--color-white--200);
    --of--Color--300: var(--of--color-brand--100);
    --of--Color--400: var(--of--color-black--200);
    --of--Color--500: var(--of--color-brand--400);
    --of--Color--600: var(--of--color-brand--300);
  
  
    --of--LineHeight--sm: 1.3;
    --of--LineHeight--lg: 1.5;
  
    --of--FontWeight--100: 400;
    --of--FontWeight--200: 700;
  
    //animation
    --of--animation: all .15s linear;
  
    //shadows
    --of--BoxShadow--sm: 0px 1px 4px rgba(0,0,0,0.5);
  
        //misc
        --of--menu-offset: 56px;
  }
    //media queries (no custom properties as MQs :(
      $ov--breakpoint--xs: 0;
      $ov--breakpoint--sm: 576px;
      $ov--breakpoint--md: 768px;
      $ov--breakpoint--lg: 992px;
      $ov--breakpoint--xl: 1200px;
      $ov--breakpoint--2xl: 1450px; 

