:root{
    --bg-primary-color:rgb(27, 27, 27);
    --bg-secondary-color:rgb(84, 84, 84);
    --bg-active-color:rgb(233, 233, 233);

    /* text color */
    --text-primary-color: rgb(225, 225, 225);
        --text-secondary-color: rgb(234, 234, 234);
        --text-active-color: rgb(30, 30, 30);

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

    /* gutter */
    --gutter-s:0.5rem;
    --gutter-m: 1rem;
    --gutter-l: 1.5rem;
    --gutter-xl: 2rem;
    --gutter-xxl: 3rem;
    /* margin */
    --margin-s: 0.5rem;
    --margin-m: 1rem;
    --margin-l: 1.5rem;
    --margin-xl: 2rem;
    --margin-xxl: 3rem;
    /* font-size */
    --font-size-s: 0.875rem;
    --font-size-m: 1rem;
    --font-size-l: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    /* border-radius */
    --border-radius-s: 0.2rem;
    --border-radius-m: 0.25rem;
    --border-radius-l: 0.3rem;
    --border-radius-xl: 0.4rem;
    --border-radius-xxl: 0.5rem;
}