:root{

    /* bg-colors */
    --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, 73);
    --bg-success-color: rgb(4, 185, 61);
    --bg-sky-color: rgb(55, 139, 255);
    --bg-remove-color: rgb(248, 219, 4);

    /* text-colors */
    --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(24, 24, 24);

    /* padding */
    --padding-s: 0.5rem;
    --padding-m: 1rem;
    --padding-l: 2rem;
    --padding-xl: 3rem;
    --padding-xxl: 4rem;
    --padding-3xl: 5rem;

    /* margin */
    --margin-s: 0.5rem;
    --margin-m: 1rem;
    --margin-l: 2rem;
    --margin-xl: 3rem;
    --margin-xxl: 4rem;
    --margin-3xl: 5rem;

    /* gutter */
    --gutter-s: 0.5rem;
    --gutter-m: 1rem;
    --gutter-l: 2rem;
    --gutter-xl: 3rem;
    --gutter-xxl: 4rem;
    --gutter-3xl: 5rem;
 
    /* font-size */
    --font-size-xs: 0.875rem;
    --font-size-s: 1rem;
    --font-size-m: 1.25rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.5rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4rem;
    --font-size-5xl: 5rem;

    /* border-radius */
    --border-radius-s: 0.25rem;
    --border-radius-m: 0.5rem;
    --border-radius-l: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-xxl: 2rem;
    --border-radius-3xl: 3rem;


}