/// Setup default text settings for body copy, with support for vertical rhythm.
///
/// This is one of the few mixins that will apply global styles to existing
/// elements when invoked. Its purpose is to set proper defaults on the
/// `html` and `body` elements, which will in turn allow to build a sound
/// typographic scale, and components that follow the vertical rythm.
///
/// The mixin will set a root font size on the `html` element, and set
/// a font size and a line height in rems on the `body` element. Most
/// vertical measures found in other components will be multiples of this
/// font size or line height.
///
/// A helper class named `withGrid` is added for the body element. Enabling
/// this class will display the baseline grid.
///
/// @group typography
///
/// @example scss - Usage
///   $k-typography: (
///     root: 18px,
///
///     font-size:   1rem,
///     font-weight: 400,
///     line-height: 1.5rem,
///   );
///
///   $k-fonts: (
///     light: (
///       family: (Maax, sans-serif),
///       weight: 400,
///     )
///   );
///
///   @include k-TypographyBodyCopy;
///
/// @example css - CSS output
///   html {
///     font-size: 18px;
///   }
///
///   body {
///     font-size:   1rem;
///     font-weight: 400;
///     line-height: 1.5rem;
///
///     font-family: Maax, sans-serif;
///     color:       #444;
///   }
///
///   body.withGrid {
///     ...;
///   }
@mixin k-TypographyBodyCopy {
  $font: 'light';
  $color: map-get($k-colors, 'font-1');

  // The root font size applied to the HTML document.
  $root: k-map-fetch($k-typography, 'root');

  // The starting font size applied to the body element.
  $base-font-size: k-map-fetch($k-typography, 'font-size');

  // The base line height.
  $base-line-height: k-map-fetch($k-typography, 'line-height');

  // Start by resetting the document font size to the requested value.
  html {
    font-size: $root;
  }

  // Set sensible defaults on the body element.
  body {
    // Assume we want to use the body copy font family by default.
    font-size: $base-font-size;
    line-height: $base-line-height;
    color: $color;

    @include k-typographyFont($font);

    // Apply this class on the body element to display the baseline grid.
    &.withGrid {
      $gradient: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px);

      background-image: $gradient;

      background-repeat: repeat-y;
      background-size: 100% $base-line-height;
    }
  }
}