/* ==========================================================
 	 Defines the typographic baseline.
   We define every size in pixels, the underlying system
   converts the respective units to the responsive REM value.
 	 ========================================================== */

/**
 * Our base font-size and line-height
 */
$base-font-size:   	16                                	!default;
$base-line-height: 	24                                	!default;
$line-height-ratio:	$base-line-height/$base-font-size   !default;

$font-sizes: (
	'xs': 			(
		font-size: 		14,
		line-height: 	16
	),
	's': 				(
		font-size: 		15,
		line-height: 	24
	),
	'base': 		(
		font-size: 		$base-font-size,
		line-height: 	$base-line-height
	),
	'm': 				(
		font-size: 		20,
		line-height: 	24
	),
	'l': 				(
		font-size: 		24,
		line-height: 	32
	),
	'xl': 			(
		font-size: 		28,
		line-height: 	36
	),
	'xxl': 			(
		font-size: 		32,
		line-height: 	44
	),
	'xxxl': 		(
		font-size: 		40,
		line-height: 	56
	),
	'xxxxl': 		(
		font-size: 		56,
		line-height: 	56
	),
);


$font-weights: (
	//'thin':	        100,
	//'extra-light':	200,
	'light': 		300,
	'regular': 		400,
	//'medium': 		500,
	//'semi-bold': 	600,
	//'semiBold': 	600,
	//'bold':			700,
	'extra-bold': 	800,
	'extraBold': 	800,
	'black': 		900,
);


/**
 *	Here we assign short names for the font families
 */

$font-system:		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-azo-sans:     'azo-sans-web', sans-serif;
$font-mokoko: 	    'mokoko', sans-serif;