html
{
  color: $font-color-primary;
  font-weight: $font-weight-regular;
  font-size: $font-size-body;
  font-family: $font-family-default;
}

body,
h1,
h2,
h3,
h4
{
  line-height: 1.5; // Do not modify. This is a requirement of WCAG 1.4.8.
}

h1
{
  margin-bottom: $space-md;
  font-weight: $font-weight-regular;
  font-size: $font-size-h1;
}

h2
{
  margin-bottom: $space-md;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-h2;
}

h3
{
  margin-bottom: $space-sm;
  font-weight: $font-weight-bold;
  font-size: $font-size-h3;
}

h4
{
  margin-bottom: $space-sm;
  color: $font-color-secondary;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-h4;
}

p
{
  margin: 0 0 $space-sm;
}

// defaults for semantic elements that apply visual treatments

small
{
  font-size: $font-size-sm;
}

em
{
  font-style: italic;
}

strong
{
  font-weight: $font-weight-semi-bold;
}

dt
{
  font-weight: $font-weight-regular;
}

dd
{
  font-weight: $font-weight-semi-bold;
}

code,
pre
{
  color: $font-color-code;
  font-size: $font-size-body;
  font-family: $font-family-code;
}

code
{
  word-break: break-word;
}

pre
{
  display: block;
  margin: 0 0 $space-sm;

  & code
  {
    word-break: normal;
  }
}

// resetting styles of non-semantic elements to reinforce use of semantic html for content and css for presentation

i
{
  font-style: normal;
}

b
{
  font-weight: $font-weight-regular;
}