/** =====================================================================================
 *  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: 28 !default;
$line-height-ratio: $base-line-height/$base-font-size !default;

$font-sizes: (
  'xs': (
    font-size: 12,
    line-height: 18
  ),
  's': (
    font-size: 14,
    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: 32,
    line-height: 40
  ),
);

$font-weights: (
  regular: 400,
  medium: 500,
  semiBold: 600,
  extraBold: 800,
);


/**
 *	Here we assign short names for the font families
 */
$font-raleway:  'Raleway', 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-raleway,

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