:root {
    /* 
    @what: defines break points
    @why: to use it as a variables on other files
    */
    /*
    
    --norma-sm-screen: 360px;
    --norma-md-screen: 1024px;
    --norma-lg-screen: 1280px;
    --norma-xl-screen: 1920px;
    --norma-xxl-screen: 3840px;

    */
    /**************
    **** utils ****
    ***************/
    /*
        fonts size
  */
    --norma--font-xxs: 0.625rem; /* 10px */
    --norma--font-xs: 0.75rem; /* 12px */
    --norma--font-sm: 1rem; /* 16px */
    --norma--font-md: 1.333rem; /* 21px */
    --norma--font-lg: 1.777rem; /* 28.43px */
    --norma--font-xl: 2.369rem; /* 37.90px */
    --norma--font-xxl: 3.157rem; /* 50.52px */
    --norma--font-xxxl: 4.209rem; /* 67.34px */
    --norma--font-xxxxl: 3.75rem; /* 47px */
    /*
       responsive fonts size
  */
    /*
        fonts weight
  */
    --norma--fw-bold: 600; /* bold */
    --norma--fw-medium: 500; /* medium */
    --norma--fw-regular: 400; /* regular */
    --norma--fw-light: 300; /* light */
    /*
        padding
  */
    --norma--padding-xxs: 2px;
    --norma--padding-xs: 4px;
    --norma--padding-sm: 8px;
    --norma--padding-md: 16px;
    --norma--padding-md-lg-between: 20px;
    --norma--padding-lg: 32px;
    --norma--padding-xl: 44px;
    --norma--padding-xxl: 52px;
    /*
        margin
  */
    --norma--margin-xss: 2px;
    --norma--margin-xs: 4px;
    --norma--margin-xs-sm-between: 6px;
    --norma--margin-sm: 8px;
    --norma--margin-sm-md-between: 12px;
    --norma--margin-md: 16px;
    --norma--margin-md-lg-between: 20px;
    --norma--margin-lg: 32px;
    --norma--margin-xl: 44px;
    --norma--margin-xxl: 52px;
    --norma--margin-xxxxl: 200px;
    /*
        border radius
  */
    --norma--border-raduis-xs: 2px;
    --norma--border-raduis-sm: 5px;
    --norma--border-raduis-md: 10px;
    --norma--border-raduis-hight: 84px;
    /* 
    height
  */
    --norma--height-sm: 8px;
    --norma-height-sm-2: 16px;
    --norma-height-sm-3: 12px;
    --norma-height-sm-4: 18px;
    --norma--height-md: 24px;
    --norma--height-lg: 32px;
    --norma--height-xl: 44px;
    --norma--height-xxl: 52px;
    --norma--height-xxxl: 54px;
    --norma--height-xxxxl: 64px;
    --norma--height-xxxxxl: 84px;
    --norma--height-xxxxxxl: 100px;
    --norma--height-xxxxxxxl: 135px;
    --norma--height-toggle-nav-btn: 39px;
    /*alert height*/
    --norma--height-alert-min: 42px;
    --norma--height-alert-max: 152px;
    --norma--height-alert-info-wrap-max: 98px;
    /* more info box */
    --norma--height-info-box-min: 180px;
    --norma--height-info-box-max: 200px;
    /* 

    width
  */
    --norma--width-xs: 8px;
    --norma--width-xs-2: 12px;
    --norma--width-sm: 16px;
    --norma--width-md: 24px;
    --norma--width-lg: 32px;
    --norma--width-xl: 40px;
    --norma--width-xxl: 56px;
    --norma--width-xxxl: 64px;
    --norma--width-xxxl-nav: 70px;
    --norma--width-xxxxl: 84px;
    --norma--width-90: 90px;
    --norma--width-100: 100px;
    --norma--width-sidebar-full: 254px;
    --norma--width-toggle-nav-btn: 39px;
    /* 

    line height
  */
    --norma--line-height-1: 23px;
    --norma--line-height-2: 19px;
    --norma--line-height-3: 40px;
    --norma--line-height-4: 15px;
    --norma--line-height-5: 10px;
    --norma--line-height-12: 12px;
    /* 

    transform
  */
    --norma--line-transform-1: 23px;
    --norma--line-transform-2: 19px;
    --norma--line-transform-3: 40px;
    --norma--line-transform-4: 15px;
    /* 

    left -right -top -bottom for absolute
  */
    --norma--absolute-var-1: 10px;
    --norma--absolute-var-2: 3px;
    --norma--absolute-minus-var-1: -10px;
    --norma--absolute-minus-var-2: -14px;
    --norma--absolute-minus-var-7: -7px;
    --norma--absolute-minus-var-4: -4px;
    --norma--absolute-minus-var-24: -24px;
    --norma--absolute-notify-top: 70px;
}