@gray-100: #2c2722;
@gray-80: #56524f;
@gray-70: #6b6865;
@gray-50: #969391;
@gray-40: #aba9a7;
@gray-30: #c0bebd;
@gray-20: #d5d4d3;
@gray-15: #dfdfde;
@gray-10: #eae9e9;
@gray-8: #eeeeed;
@gray-6: #f2f2f2;
@gray-5: #f5f4f4;
@gray-3: #f9f9f8;

@light-color: #ffffff;
@light-text-color: rgba(255, 255, 255, 0.8);
@dark-color: #000000;
@primary-color: #2889e3;
@primary-hover-color: #53a0e9;
@primary-disabled-color: #bad9f6;
@dangerous-color: #fb7350;
@dangerous-hover-color: #fc8f73;
@dangerous-disabled-color: #fdc7b9;
@assist-color: #ffe2da;
@confirm-color: #fee3dc;
@confirm-hover-color: #ffe8e1;

// modal | dialog | drawer | popover
@modal-padding: 28px;
//popup
@popup-padding: 20px;