:root{
    /*bgcolor*/
    --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(255, 77, 77);
    --bg-success-color: rgb(77, 255, 77);
    --bg-extra-color: blue;

    /*nro brutalism*/
    --bg-color:#fff;

    /*text colurs*/
    --text-primary-color: rgb(237, 237, 237);
    --text-secondary-color: rgb(200, 200, 200);
    --text-teretiary-color: rgb(150, 150, 150);
    --text-active-color: rgb(24, 24, 24);
    /*Padding*/
    --padding-sm:0.5rem;
    --padding-md:1rem;
    --padding-lg:1.5rem;
    --padding-xl:2rem;
    --padding-2xl:3rem;
    /*margin*/
    --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*/
    --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;

    
}