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

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

$font-weights: (
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
);

/**
 *	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
);