// Typography
// ==========================================================================

// Increase the base font size to 19px
// Using the core-19 mixin from the govuk_toolkit _typography.scss file

#content {
  @include core-19;
  -webkit-font-smoothing: antialiased;
}

// Core font sizes
.font-xxlarge {
  @include core-80;
}
.font-xlarge {
  @include core-48;
}
.font-large {
  @include core-36;
}
.font-medium {
  @include core-24;
}
.font-small {
  @include core-19;
}
.font-xsmall {
  @include core-16;
}

// Bold font sizes
.bold-xxlarge {
  @include bold-80();
}
.bold-xlarge {
  @include bold-48();
}
.bold-large {
  @include bold-36();
}
.bold-medium {
  @include bold-24();
}
.bold-small {
  @include bold-19();
}
.bold-xsmall {
  @include bold-16();
}

// Common heading sizes
// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
// Spacing is set in em, using the px to em function in the elements _helpers.scss file

// Headings
.heading-xlarge {
  @include bold-48();

  margin-top: em(15, 32);
  margin-bottom: em(30, 32);

  @include media(tablet) {
    margin-top: em(30, 48);
    margin-bottom: em(60, 48);
  }

  .heading-secondary {
    @include core-27();

    display: block;
    color: $secondary-text-colour;
  }

}

.heading-large {
  @include bold-36();

  margin-top: em(25, 24);
  margin-bottom: em(10, 24);

  @include media(tablet) {
    margin-top: em(45, 36 );
    margin-bottom: em(20, 36);
  }

}

.heading-medium {
  @include bold-24();

  margin-top: em(25, 20);
  margin-bottom: em(10, 20);

  @include media(tablet) {
    margin-top: em(45, 24);
    margin-bottom: em(20, 24);
  }

}

.heading-small {
  @include bold-19();

  margin-top: em(10, 16);
  margin-bottom: em(5, 16);

  @include media(tablet) {
    margin-top: em(20, 19);
  }

}

// Text
p {
  margin-top: em(5, 16 );
  margin-bottom: em(20, 16);

  @include media(tablet) {
    margin-top: em(5);
    margin-bottom: em(20);
  }

}

// Lede, or intro text
.lede {
  @include core-24;
}

// Set a max-width for text blocks
// Less than 75 characters per line of text
.text {
  max-width: 30em;
}


// Code styles
pre,
code {
  font-size: 13px;
  line-height: 19px;
  color: $black;
  background-color: $highlight-colour;
  border: 1px solid $border-colour;
  padding: 3px 7px;
}