////
/// Typography
/// @group typography
///
////

/// Font stack
$font-stack:            ('Helvetica', 'Arial', sans-serif);


/// Font variables for basic font settings and font-sizes
/// @example
///   .element {
///     font-size: font(size, 'xxl');
///     line-height: font(base, 'line-height');
///   }
$fonts: (
  base: (
    'stack':          $font-stack,
    'sans-serif':     ('brandon-grotesque', #{$font-stack}),
    'serif':          ('minion-pro', serif),
    'size':           100%,
    'line-height':    1.4,
    'regular-weight': 400,
    'thin-weight':    200
  ),
  size: (
    'xxs': 12px,
    'xs': 13px,
    's': 15px,
    'm': 16px,
    'l': 18px,
    'xl': 21px,
    'xxl': 24px,
    'xxxl': 28px,
    'xxxxl': 32px,
    'xxxxxl': 38px,
    'xxxxxxl': 52px
  )
);

/// Function to parse font map
@function font($font, $type: 'base') {
    @return map-get(map-get($fonts, $font), $type);
}