:root{
    --bg-primary-color: rgb(17,17,17);
    --bg-secondary-color: rgb(34,34,34);
    --bg-active-color:rgb(233,233,233);
    --bg-danger-color:rgb(200,50,50);
    --bg-success-color:rgb(30,167,40);

    --text-primary-color: rgb(237,237,237);
    --text-secondary-color: rgb(200,200,200);
    --text-tertiary-color:rgb(150,150,150);
      --text-active-color:rgb(24,24,24);


    --padding-sm : 0.5rem;
    --padding-md : 1rem;
    --padding-lg : 1.5rem;
    --padding-xl : 2rem;
    --padding-2xl : 3rem;

    --margin-sm : 0.5rem;
     --margin-md : 1rem;
     --margin-lg : 1.5rem;
     --margin-xl : 2rem;
     --margin-2xl : 3rem;


    /* ///gutter/// */
        --gutter-sm : 0.5rem;
      --gutter-md : 1rem;
     --gutter-lg : 1.5rem;
     --gutter-xl : 2rem;
     --gutter-2xl : 3rem;


     
    --font-size-sm : 0.875rem;
    --font-size-md : 1rem;
    --font-size-lg : 1.125rem;
    --font-size-xl : 1.25rem;
    --font-size-2xl : 1.5rem;

       --border-radius-sm : 0.2rem;
    --border-radius-md : 0.25rem;
    --border-radius-lg : 0.3rem;
    --border-radius-xl : 0.4rem;
    --border-radius-2xl : 0.5rem;
    


      
  
}