html{
    /* Default Brand values */
    --fs-m:1; /* Multiplies font sizes if a tuneup is required*/

    --ch-pr: 202deg;
    --cs-pr: 57%;
    --cl-pr: 51%;

    --ch-sec: 0deg;
    --cs-sec: 0%;
    --cl-sec: 66%;

    --ch-txt: 0;
    --cs-txt: 0%;
    --cl-txt: 33%;

    --ch-txtinv: 0;
    --cs-txtinv: 0%;
    --cl-txtinv: 100%;

    --ch-bg: 0;
    --cs-bg: 0%;
    --cl-bg: 100%;

    --ch-bg2: 0;
    --cs-bg2: 0%;
    --cl-bg2: 86%;

    --ch-danger: 0;
    --cs-danger: 77%;
    --cl-danger: 60%;

    --ch-success: 121deg;
    --cs-success: 44%;
    --cl-success: 55%;

    /* Default constants*/
    --fs-szm:1; /* Adds value depending on size */
    --lum-step:7%; /* Steps to increase luminosity on hsl */

    /* Colors */

    /* Primary */
    --c-pr-400:hsl(var(--ch-pr), var(--cs-pr), var(--cl-pr));
    --c-pr-300:hsl(var(--ch-pr), var(--cs-pr), Calc(var(--cl-pr) + var(--lum-step) ) );
    --c-pr-100: hsl(var(--ch-pr), var(--cs-pr), Calc(var(--cl-pr) + var(--lum-step)*3 ) );

    /* Secondary */
    --c-sec-400: hsl(var(--ch-sec), var(--cs-sec), var(--cl-sec));

    /* Background main white*/
    --c-bg-400: hsl(var(--ch-bg), var(--cs-bg), var(--cl-bg) ); 

    /* Background objects */
    --c-bg2-400: hsl(var(--ch-bg2), var(--cs-bg2), var(--cl-bg2) ); 
    --c-bg2-300: hsl(var(--ch-bg2), var(--cs-bg2), Calc(var(--cl-bg2) + var(--lum-step) ));

    /* Text */
    --c-txt-400: hsl(var(--ch-txt), var(--cs-txt), var(--cl-txt));
    --c-txt-300: hsl(var(--ch-txt), var(--cs-txt), Calc(var(--cl-txt) + var(--lum-step)) );
    --c-txt-200: hsl(var(--ch-txt), var(--cs-txt), Calc(var(--cl-txt) + var(--lum-step) * 2 ) );

    /* Text inverted */
    --c-txt-100: hsl(var(--ch-txtinv), var(--cs-txtinv), var(--cl-txtinv) );

    /* Utility */
    --c-danger-400: hsl(var(--ch-danger), var(--cs-danger), var(--cl-danger));
    --c-danger-300: hsl(var(--ch-danger), var(--cs-danger), calc( var(--cl-danger) + var(--lum-step) ) );
    --c-danger-100: hsl(var(--ch-danger), var(--cs-danger), calc( var(--cl-danger) + var(--lum-step)*3 ) );

    --c-success-400: hsl(var(--ch-success), var(--cs-success), var(--cl-success));
    
    /* Font size */
    --fs-1000: Calc( 6.0rem * var(--fs-szm) * var(--fs-m));
    --fs-900:  Calc( 4.5rem * var(--fs-szm) * var(--fs-m));
    --fs-800:  Calc( 3.0rem * var(--fs-szm) * var(--fs-m));
    --fs-700:  Calc( 2.4rem * var(--fs-szm) * var(--fs-m));
    --fs-600:  Calc( 1.8rem * var(--fs-szm) * var(--fs-m));
    --fs-500:  Calc( 1.4rem * var(--fs-szm) * var(--fs-m));
    --fs-400:  Calc( 1.2rem * var(--fs-szm) * var(--fs-m));
    --fs-300:  Calc( 1.05rem * var(--fs-szm) * var(--fs-m));
    --fs-200:  Calc( 0.9rem * var(--fs-szm) * var(--fs-m));
    --fs-100:  Calc( 0.8rem * var(--fs-szm) * var(--fs-m));

    /* padding */
    --pd-600: 1.5em;
    --pd-500: 1em;
    --pd-400: 0.5em;
    --pd-300: 0.25em;

    /* margin */
    --mg-500: 4rem;
    --mg-400: 2rem;
    --mg-300: 1rem;
    --mg-200: 0.5rem;

    /* Border radius */
    --br-500: 0;

    /* Box shadow */
    --bs-400: 0px 3px 5px rgba(0, 0, 0, .4);
    --bs-400-h: 0px 4px 4px rgba(0, 0, 0, .4);
    --bs-400-a: 0px 2px 6px rgba(0, 0, 0, .4);

    --bs-300: 0px 1px 3px rgba(0, 0, 0, .4);
    --bs-300-h: 0px 3px 2px rgba(0, 0, 0, .4);
    --bs-300-a: 0px 0px 5px rgba(0, 0, 0, .4);

    --bs-500: 0px 3px 5px rgba(0, 0, 0, .4);
    --bs-500-h: 0px 4px 4px rgba(0, 0, 0, .4);
    --bs-500-a: 0px 2px 6px rgba(0, 0, 0, .4);

    /* Admin colors*/
    /* Notification colors*/
    --c-n-info: rgba(132, 207, 218, .56);
    --c-n-alert: rgba(255, 214, 67, .56);
    --c-n-danger: rgba(231, 74, 74, .56);
    --c-n-success: rgba(89, 191, 91, .56);

    /* Measure colors*/
    --c-m-height: #af2b88;
    --c-m-chest: #76C5FF;
    --c-m-waist: #7000FF;
    --c-m-high-hip: #2330A4;
    --c-m-hip: #2330A4;
    --c-m-low-hip: #7D8AFE;
    --c-m-thigh: #FF005C;
    --c-m-torso-length: #C20404;
    --c-m-arm-length: #298D8D;
    --c-m-leg-length: #89AB00;
    --c-m-leg_length: #89AB00;
}

@media all and (min-width:2000px) {
    html {
        /* Font size */
        --fs-1000: Calc(7rem * var(--fs-m));
        --fs-900: Calc(5rem * var(--fs-m));
        --fs-800: Calc(2.9rem * var(--fs-m));
        --fs-700: Calc(2.5rem * var(--fs-m));
        --fs-600: Calc(2rem * var(--fs-m));
        --fs-500: Calc(1.9rem * var(--fs-m));
        --fs-400: Calc(1.45rem * var(--fs-m));
        --fs-300: Calc(1.35rem * var(--fs-m));
        --fs-200: Calc(1.1rem * var(--fs-m));
        --fs-100: Calc(0.8rem * var(--fs-m));
    }
}

@media all and (max-width:1200px){
    html {
        /* padding */
        --pd-500: 1em;
        --pd-400: 0.5em;
        --pd-300: 0.25em;

        /* margin */
        --mg-500: 2rem;
        --mg-400: 1rem;
        --mg-300: 0.5rem;
        --mg-200: 0.25rem;
    }
}

@media all and (max-width:992px){
    
    html{
        --fs-900: Calc(3rem * var(--fs-m));

        /* padding */
        --pd-500: 1em;
        --pd-400: 0.5em;
        --pd-300: 0.25em;
    
        /* margin */
        --mg-500: 2.6rem;
        --mg-400: 1.3rem;
        --mg-300: 0.65rem;
        --mg-200: 0.325rem;
    }
}

@media all and (max-width:600px){

    html{
        --fs-szm:0.75;

        /* padding */
        --pd-500: 1em;
        --pd-400: 0.5em;
        --pd-300: 0.25em;
    
        /* margin */
        --mg-500: 1.5rem;
        --mg-400: 0.75rem;
        --mg-300: 0.375rem;
        --mg-200: 0.1875rem;
    }
}
