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

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

$font-weights: (
  regular: 400,
  medium: 500,
  semi-bold: 600,
  bold: 700,
);

/**
 *	Here we assign short names for the font families
 */
$font-titilium: 'Titillium Web', sans-serif;
$font-barlow: 'Barlow', 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-barlow,
  primary: $font-titilium,

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