:root {
/*---------------------------------------------GRID SYSTEM---------------------------------------------*/
    /*Desktop*/
    --desktop-xl: 1920px;
    --desktop-md: 1440px;
    --desktop-xs: 1280px;
    --desktop-margin: 8%;
    
    /*Tablet*/
    --tablet-xl: 1024px;
    --tablet-md: 900px;
    --tablet-xs: 768px;
    --tablet-margin : 6%;
    
    /*Mobile*/
    --phone-xl: 480px;
    --phone-md: 375px;
    --phone-xs: 320px;
    --phone-margin : 4%;

/*@media (min-width: var(--desktop-xl)) {

}*/

/*---------------------------------------------SCALE---------------------------------------------*/
    --scale-0: 0px;
    --scale-1: 1px;
    --scale-2: 2px;
    --scale-4: 4px;
    --scale-6: 6px;
    --scale-8: 8px;
    --scale-12: 12px;
    --scale-16: 16px;
    --scale-20: 20px;
    --scale-24: 24px;
    --scale-32: 32px;
    --scale-40: 40px;
    --scale-48: 48px;
    --scale-56: 56px;
    --scale-72: 72px;

/*------------------------------------------SPACING SYSTEM---------------------------------------------*/
    --space-0: var(--scale-0);
    --space-2: var(--scale-2);
    --space-4: var(--scale-4);
    --space-6: var(--scale-6);
    --space-8: var(--scale-8);
    --space-12: var(--scale-12);
    --space-16: var(--scale-16);
    --space-24: var(--scale-24);
    --space-32: var(--scale-32);
    --space-40: var(--scale-40);
    --space-48: var(--scale-48);
    --space-56: var(--scale-56);
    --space-72: var(--scale-72);

/*------------------------------------------RADIUS------------------------------------------------------*/
    --radii-none: var(--scale-0);
    --radii-2: var(--scale-2);
    --radii-4: var(--scale-4);
    --radii-6: var(--scale-6);
    --radii-8: var(--scale-8);
    --radii-12: var(--scale-12);
    --radii-16: var(--scale-16);
    --radii-24: var(--scale-24);
    --radii-32: var(--scale-32);
    --radii-rounded: var(--scale-56);

/*------------------------------------------BORDER WIDTH-----------------------------------------------*/
    --border-none: var(--scale-0);
    --border-1: var(--scale-1);
    --border-2: var(--scale-2);
    --border-4: var(--scale-4);
    --border-6: var(--scale-6);
    --border-8: var(--scale-8);

/*------------------------------------------BOX SHADOW-----------------------------------------------*/
    --shadow-sm: 0 0 2px var(--primary-tint-4);
    --shadow-md: 0 0 2px var(--primary-tint-4);
    --shadow-lg: 0 0 2px var(--primary-tint-4);
    --shadow-xl: 0 0 2px var(--primary-tint-4);
    --shadow-inner-sm: 0 0 2px var(--primary-tint-4);
    --shadow-inner-md: 0 0 2px var(--primary-tint-4);
    --shadow-inner-lg: 0 0 2px var(--primary-tint-4);
    --shadow-inner-xl: 0 0 2px var(--primary-tint-4);
}