@import '../franklin-settings';
@import '../mixins';

// Body
html,
body {
  font-family: $fs-base-font-face;
  background-color: $colour-sky-white;

  @include fs-breakpoints('small') {
    font-size: $font-size-small;
  }

  @include fs-breakpoints('medium') {
    font-size: $font-size-medium;
  }

  @include fs-breakpoints('large') {
    font-size: $font-size-large;
  }
}

// Heading tag settings
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $fs-headers-font-face;
  color: $colour-yankees-blue;
}

// Typography scale https://type-scale.com/
// 1.250 "Major third"

.x-huge {
  font-size: 3.052rem;
  font-weight: $fs-font-weight-bold;
}

h1,
.huge {
  font-size: 2.441rem;
  font-weight: $fs-font-weight-semi-bold;
}
h2,
.big {
  font-size: 1.953rem;
  font-weight: $fs-font-weight-semi-bold;
}
h3,
.medium {
  font-size: 1.563rem;
  font-weight: $fs-font-weight-semi-bold;
}
h4,
.small {
  font-size: 1.25rem;
  font-weight: $fs-font-weight-semi-bold;
}
h5,
.tiny {
  font-size: 1rem;
  font-weight: $fs-font-weight-semi-bold;
}
// Should not use h6
h6 {
  font-size: 1rem;
  font-weight: $fs-font-weight-regular;
}

p {
  margin-bottom: 1.875rem;
}

ul,
ol {
  margin-left: 1.25rem;
}

ul.no-bullet,
ol.no-bullet {
  list-style: none;
  margin-left: 0;
}

ul,
ol,
dl {
  margin-bottom: 1rem;
  list-style-position: outside;
  line-height: 1.6;

  li > &,
  ol > & {
    margin-bottom: 0;
  }
}

ul {
  list-style-type: disc;
}

a {
  color: $colour-link;
  text-decoration: none;
  font-weight: $fs-font-weight-semi-bold;
  &:hover {
    color: color-mix(in srgb, $colour-link 90%, white);
  }
}