/** =====================================================================================
 *  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: 13,
    line-height: 16
  ),
  's': (
    font-size: 14,
    line-height: 16
  ),
  'base': (
    font-size: $base-font-size,
    line-height: $base-line-height
  ),
  'm': (
    font-size: 18,
    line-height: 24
  ),
  'l': (
    font-size: 20,
    line-height: 24
  ),
  'xl': (
    font-size: 24,
    line-height: 32
  ),
  'xxl': (
    font-size: 32,
    line-height: 40
  ),
  'xxxl': (
    font-size: 40,
    line-height: 48
  ),
  'xxxxl': (
    font-size: 48,
    line-height: 56
  ),
);

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

/**
 *	Here we assign short names for the font families
 */
$font-roboto: 'Roboto', sans-serif;
$font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-families: (
  base: $font-roboto,
  //primary: $font-roboto,

  // Fallback font
  system: $font-system
);