//==================================
// set base typography
//==================================
$mobile-body: 14px;
$tablet-body: 16px;
$desktop-body: 18px;
$lg-desktop-body: 20px;

//==================================
// variables
//==================================
$xxl-size:  3.157em;
$xl-size:   2.369em;
$lg-size:   1.777em;
$md-size:   1.333em;
$sm-size:   1em;
$xs-size:   .75em;
$xxs-size:  .563em;

//==================================
// classes
//==================================

.font-xxl {
    font-size: $xxl-size;
}

.font-xl {
    font-size: $xl-size;   
}

.font-lg {
    font-size: $lg-size;
}

.font-md {
    font-size: $md-size;
}

.font-sm {
    font-size: $sm-size;
}

.font-xs {
    font-size: $xs-size;
}

.font-xxs {
    font-size: $xxs-size
}


//==================================
// responsive typography
//==================================
//mobile-only styles
@media (max-width: 768px) {
  /*Mobile typeface sizes*/
    body {
        font-size: $mobile-body;
    }

    .font-xxl {
        font-size: $xxl-size;
    }

    .font-xl {
        font-size: $xl-size;   
    }

    .font-lg {
        font-size: $lg-size;
    }

    .font-md {
        font-size: $md-size;
    }

    .font-sm {
        font-size: $sm-size;
    }

    .font-xs {
        font-size: $xs-size;
    }

    .font-xxs {
        font-size: $xxs-size
    }

}

//for tablet sizes
@media (min-width: 768px) {
  /*Tablet typeface sizes*/
    body {
        font-size: $tablet-body;
    }
    
    .font-xxl {
        font-size: $xxl-size;
    }

    .font-xl {
        font-size: $xl-size;   
    }

    .font-lg {
        font-size: $lg-size;
    }

    .font-md {
        font-size: $md-size;
    }

    .font-sm {
        font-size: $sm-size;
    }

    .font-xs {
        font-size: $xs-size;
    }

    .font-xxs {
        font-size: $xxs-size
    }
}

//for desktop (medium) sizes
@media(min-width: 992px) {
  /*Desktop typeface sizes*/
    body {
        font-size: $desktop-body;
    }
    
    .font-xxl {
        font-size: $xxl-size;
    }

    .font-xl {
        font-size: $xl-size;   
    }

    .font-lg {
        font-size: $lg-size;
    }

    .font-md {
        font-size: $md-size;
    }

    .font-sm {
        font-size: $sm-size;
    }

    .font-xs {
        font-size: $xs-size;
    }

    .font-xxs {
        font-size: $xxs-size
    }

}

//For desktop (large) sizes
@media(min-width: 1200px) {
  /*Large Desktop typeface sizes*/
    body {
        font-size: $lg-desktop-body;
    }
    .font-xxl {
        font-size: $xxl-size;
    }

    .font-xl {
        font-size: $xl-size;   
    }

    .font-lg {
        font-size: $lg-size;
    }

    .font-md {
        font-size: $md-size;
    }

    .font-sm {
        font-size: $sm-size;
    }

    .font-xs {
        font-size: $xs-size;
    }

    .font-xxs {
        font-size: $xxs-size
    }
}