// =============================================================================
// TYPOGRAPHY
// =============================================================================


// Global Type Vars
// -----------------------------------------------------------------------------
//
// IMPORTANT: These variables are NOT to be consumed in components/apps.
//            Instead use the maps and functions outlined below.
//
// 1. Set up the REM units for the rest of the framework (pixel value).
// The stencilNumber() function outputs a pixel value by default.
// 2. Your base font size should always start at 1rem;
// 3. Your <body> line-height. This value is used for spacing calculations,
//    where spacing is = $fontSize-root * $lineHeight-base.
//
// -----------------------------------------------------------------------------


// Font families
// -----------------------------------------------------------------------------

$fontFamily-sans:               stencilFontFamily("body-font"), Arial, Helvetica, sans-serif;
$fontFamily-serif:              null;
$fontFamily-mono:               null;
$fontFamily-headings:           stencilFontFamily("headings-font"), Arial, Helvetica, sans-serif;

$fontFamily-hero:               stencilFontFamily("headings-font"), Arial, Helvetica, sans-serif;


// Font sizes
// -----------------------------------------------------------------------------

$fontSize-root:                 stencilNumber("fontSize-root"); // 1
$fontSize-base:                 1rem; // 2
$fontSize-hero:                 50px;
$fontSize-largest:              stencilNumber("fontSize-h1");
$fontSize-larger:               stencilNumber("fontSize-h2");
$fontSize-large:                stencilNumber("fontSize-h3");
$fontSize-small:                stencilNumber("fontSize-h4");
$fontSize-smaller:              stencilNumber("fontSize-h5");
$fontSize-smallest:             stencilNumber("fontSize-h6");
$fontSize-tiny:                 12px;
$fontSize-logo-large:           stencilNumber("logo_fontSize");
$fontSize-logo-medium:          2.5vw;
$fontSize-logo-small:           $fontSize-logo-medium - 0.25vw;


// Line heights
// -----------------------------------------------------------------------------

$lineHeight-base:               1.5; // 3
$lineHeight-hero:               50px;
$lineHeight-largest:            37px;
$lineHeight-larger:             32px;
$lineHeight-large:              29px;
$lineHeight-small:              24px;
$lineHeight-smaller:            19px;
$lineHeight-smallest:           15px;
$lineHeight-tiny:               18px;


// Font weights
// -----------------------------------------------------------------------------

$fontWeight-thin:               300;
$fontWeight-normal:             400;
$fontWeight-medium:             500;
$fontWeight-semibold:           600;
$fontWeight-bold:               700;
$fontWeight-black:              900;


// Letter spacing
// -----------------------------------------------------------------------------

$letterSpacing-base:            0;
$letterSpacing-largest:         0.25px;
$letterSpacing-larger:          0.25px;
$letterSpacing-large:           0.25px;
$letterSpacing-small:           0.25px;
$letterSpacing-smaller:         0.25px;
$letterSpacing-smallest:        0.25px;
