:root{
 /* bg-colors */
--bg-primary-color:rgb(26, 26, 26);
--bg-secondary-color:rgb(46, 46, 46);
--bg-active-color:rgb(242, 242, 242);   
--bg-danger-color:rgb(255, 40, 40);
--bg-success-color:rgb(0, 196, 0);

/* text-color */
--text-primary-color:rgb(255, 255, 255);
--text-secondary-color:rgb(200, 200, 200);
--text-tertiary-color:rgb(150, 150, 150);
--text-active-color:rgb(28, 28, 28);

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

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



}