:root {
    /* bg-Color */
    --bg-Primary-color: #222121;
    --bg-secondary-color: #333131;
    --bg-tertiary-color: #535252;
    --bg-active-color: #e9e4e4;
    --bg-danger-color:#ff0000;
    --bg-success-color:#037503;
    /*text-color*/
    --text-primary-color:#ececec;
    --text-secondary-color:#d3d1d1;
    --text-tertiary-color:#bdbebe;
    --text-active-color:#2b2b2b;
    
    /* padding*/
    --padding-sm: 0.5rem;
    --padding-md: 1rem;
    --padding-lg: 1.5rem;
    --padding-xl: 2rem;
    --padding-2xl: 3rem;

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

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

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

    /*Border Radius*/
    --radius-sm: 0.2rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.3rem;
    --radius-xl: 0.4rem;
    --radius-2xl: 0.5rem;
}