////
/// @group page-typography
////

/// Base typography for page.
$page-typography: () !default;

/// Typography for content text.
$page-content-text-typography: () !default;

/// Base font size for page content
$page-content-font-size: 1em !default;

/// Base font size for page content in phone layout
$page-content-phone-font-size: 0.7em !default;

/// Color of text
/// @group page-colors
$page-text-color: #fff !default;

/// Color of text on inverted pages
/// @group page-colors
$page-inverted-text-color: #000 !default;

/// Color of title on inverted pages
/// @group page-colors
$page-inverted-title-color: null !default;

/// Background-color of pages
/// @group page-colors
$page-background-color: #000 !default;

/// Background-color of inverted pages
/// @group page-colors
$page-inverted-background-color: #fff !default;

// Deprecated. Use typography variables above.

$page-font-family: $standard-font !default;
$page-font-size: 16px !default;
$page-content-text-font-family: $page-font-family !default;
$page-content-text-font-size: 1.2em !default;
$page-content-text-line-height: 1.5em !default;

@import "./page/anchors";
@import "./page/header";
@import "./page/hyphenate";
@import "./page/paddings";
@import "./page/content_text_margin";
@import "./page/scroller";
@import "./page/shadow";

@import "./page/line_lengths";

.page {
  @include typography(
    $page-typography,
    (
      font-family: $page-font-family,
      font-size: $page-font-size
    )
  );

  color: $page-text-color;
  background-color: $page-background-color;

  &.invert {
    color: $page-inverted-text-color;
    background-color: $page-inverted-background-color;

    .page_header-title {
      color: $page-inverted-title-color;
    }
  }

  .content {
    font-size: $page-content-font-size;

    @include phone {
      font-size: $page-content-phone-font-size;
    }
  }

  .page_text > * {
    @include typography(
      $page-content-text-typography,
      (
        font-family: $page-content-text-font-family,
        font-size: $page-content-text-font-size,
        line-height: $page-content-text-line-height
      )
    );
  }

  p {
    margin-top: 0;
  }
}