// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: $font-weight-bold;
  line-height: $line-height-tight;
  margin-bottom: $spacing-base;
  color: $text-color;
}

h1 {
  @include responsive-font($font-size-3xl, $font-size-4xl);
}

h2 {
  @include responsive-font($font-size-2xl, $font-size-3xl);
}

h3 {
  @include responsive-font($font-size-xl, $font-size-2xl);
}

h4 {
  @include responsive-font($font-size-lg, $font-size-xl);
}

h5 {
  font-size: $font-size-lg;
}

h6 {
  font-size: $font-size-base;
}

// Paragraphs
p {
  margin-bottom: $spacing-base;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// Links
a {
  color: $primary-color;
  @include transition(color);
  
  &:hover {
    color: darken($primary-color, 10%);
  }
  
  &:focus-visible {
    outline: 2px solid $primary-color;
    outline-offset: 2px;
  }
}

// Lists
ul,
ol {
  margin-bottom: $spacing-base;
  padding-left: $spacing-lg;
  
  &:last-child {
    margin-bottom: 0;
  }
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: $spacing-xs;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// Code
code,
pre {
  font-family: $font-family-mono;
  font-size: $font-size-sm;
}

code {
  padding: $spacing-xs $spacing-sm;
  background-color: $bg-secondary;
  border: 1px solid $border-light;
  @include border-radius($border-radius-sm);
}

pre {
  padding: $spacing-base;
  background-color: $bg-secondary;
  border: 1px solid $border-light;
  @include border-radius();
  overflow-x: auto;
  margin-bottom: $spacing-base;
  
  code {
    padding: 0;
    background: none;
    border: none;
  }
}

// Blockquotes
blockquote {
  padding: $spacing-base $spacing-lg;
  margin-bottom: $spacing-base;
  border-left: 4px solid $primary-color;
  background-color: $bg-secondary;
  font-style: italic;
  
  p:last-child {
    margin-bottom: 0;
  }
}

// Horizontal rule
hr {
  border: none;
  height: 1px;
  background-color: $border-color;
  margin: $spacing-2xl 0;
}

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

em,
i {
  font-style: italic;
}

// Mark
mark {
  background-color: #fef3c7;
  padding: 0 $spacing-xs;
}

// Small text
small {
  font-size: $font-size-sm;
  color: $text-muted;
}

// Abbreviations
abbr[title] {
  border-bottom: 1px dotted $text-muted;
  text-decoration: none;
  cursor: help;
}

// Subscript and superscript
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}