@import 'variables';
@import 'colors';
@import 'fonts';

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 62.5%; // 10px, but better for accessibility
}

body {
  font-family: $font-stack-sans;
  color: var(--color-text-high-contrast);
  font-size: 2 * $unit;
  line-height: 3 * $unit;
}

h1,
.h1 {
  font-family: $font-stack-sans;
  font-size: 6rem;
  font-weight: 800;
  line-height: 1.2;
}

h2,
.h2 {
  font-family: $font-stack-sans;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.33;
}

h3,
.h3 {
  font-family: $font-stack-sans;
  font-size: 3.6rem;
  line-height: 1.33;
  font-weight: normal;
}

h4,
.h4 {
  font-family: $font-stack-sans;
  font-size: 2.4rem;
  line-height: 1.33;
  font-weight: normal;

  &.emphasis {
    font-weight: 800;
  }
}

h5,
.h5 {
  font-family: $font-stack-sans;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}

h6,
.h6 {
  font-family: $font-stack-monospace;
  font-size: 1.4rem;
  line-height: 1.33;
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
}

p,
.p {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--color-text-default-contrast);
}

a {
  color: var(--color-text-high-contrast);
  text-decoration: none;
}

small,
.small {
  font-size: 1.2rem;
  line-height: 1.33;
  letter-spacing: 0.25px;
}

code,
.code {
  font-family: $font-stack-monospace;
  font-size: 1.4rem;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--color-fill-bg-secondary);
  border-radius: $border-radius;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 0.2rem;
  color: $black;
}

em {
  font-style: italic;
}

b,
strong {
  font-weight: 600;
}