:root{

    /* bg color  */

    --bg-primary-color : rgb(17,17,17);
    --bg-secondry-color : rgb(34,34,34);
    --bg-active-color : rgb(233,233,233);
    --bg-denger-color : rgb(200,50,50);
    --bg-success-color : rgb(50,167,50);

    /* text colors  */

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

    /* paddings  */

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

    /* margins  */

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

    /* gutters  */

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

    /* fonts  */

    --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  */

    --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;
}