//
// Typography
// --------------------------------------------------
// scss-lint:disable SingleLinePerSelector

// Type Sizing
// -------------------------

html {
  // Default browser font-size: 16px;
  // 16px * 10/16 = 10px
  // This makes rem calculations far easier, e.g. 1.8rem * 10px = 18px
  // See http://css-tricks.com/rems-ems and http://gregrickaby.com/using-the-golden-ratio-and-rems
  font-size: percentage(10/16);
}

// Body/Paragraph text
// -------------------------

body {
  // scss-lint:disable DuplicateProperty

  @include font-family-proxima-nova();

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: $text-color;
  font-size:   rem($font-size-base); // See http://css-tricks.com/rems-ems
  font-weight: $font-weight-base;
  line-height: $line-height-base-ratio;
}

p {
  @include text-wrap();
  margin: 0 0 em($line-height-base / 2);
}

.hero-text,
.lead {
  @include hero-text();
}


b,
strong,
.strong {
  font-weight: $font-weight-bold;
}

// Headings
// -------------------------

.hero-largest, .hero-larger, .hero-large, // DEPRECATED: Remove in ≥ 0.23.0
h1, h2, h3, h4, h5, h6,
.hero-heading,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: ($line-height-base / 2);
  font-weight: $headings-font-weight;
  color: $headings-color;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: $line-height-base;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: ($line-height-base / 2);
}

h5, .h5,
h6, .h6 {
  margin-bottom: 0;
}

.hero-largest, .hero-larger, .hero-large, // DEPRECATED: Remove in ≥ 0.23.0
.hero-heading { @include hero-heading(); }

h1, .h1 { @include h1(); }
h2, .h2 { @include h2(); }
h3, .h3 { @include h3(); }

h4, .h4 { font-size: em($h4-font-size); line-height: $h4-line-height-ratio; }
h5, .h5 { font-size: em($h5-font-size); line-height: $h5-line-height-ratio; }
h6, .h6 { font-size: em($h6-font-size); line-height: $h6-line-height-ratio; }







// Small
// -------------------------

// Ex: (16px small font / 18px base font) * 100% ≈ 88%
small,
.small {
  font-size: floor((100% * $font-size-small / $font-size-base));
}

// Mark
// -------------------------

mark,
.mark {
  background-color: $mark-bg;
  padding: .2em;
}


// Text Utilities
// -------------------------

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }

@media (max-width: $screen-xs-max) {
  .text-left-xs      { text-align: left; }
  .text-right-xs     { text-align: right; }
  .text-center-xs    { text-align: center; }
  .text-justify-xs   { text-align: justify; }
}

.text-nowrap         { white-space: nowrap; }
.text-truncate       { @include text-overflow(); }

// Transformation
.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; letter-spacing: .12em; }
.text-capitalize     { text-transform: capitalize; }

// Contextual colors
%text-muted,
.text-muted {
  opacity: $text-muted-opacity;

  a,
  .u-bg-dark & a {
    @include link-underline();

    color: inherit;
  }
}

@include text-emphasis-variant('.text-success', $semantic-color-success );
@include text-emphasis-variant('.text-warning', $semantic-color-warning );
@include text-emphasis-variant('.text-danger',  $semantic-color-danger  );


// Abbreviations
// -------------------------

// Abbreviations and acronyms
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted $abbr-border-color;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}


// Addresses
// -------------------------
address {
  margin-bottom: em($line-height-base / 2);
  font-style: normal;
  line-height: $line-height-base-ratio;
}