:root {
  // sizes

  --font-size-small: 0.87rem;
  --font-size-base: 1rem;
  --font-size-large: 1.149rem;
  --font-size-xl: 1.320rem;
  --font-size-xl-2: 1.516rem;
  --font-size-xl-3: 1.741rem;
  --font-size-xl-4: 2rem;
}

@font-face {
  font-family: appFont;
  src: url('./fonts/SourceSansPro-Regular.woff2');
  font-weight: $font-weight-normal;
}
@font-face {
  font-family: appFont;
  src: url('./fonts/SourceSansPro-Bold.woff2');
  font-weight: $font-weight-bold;
}

html {
  font-family: appFont, sans-serif;
  font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5 {
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-weight: $font-weight-bold;
}

h1 {
  font-size: var(--font-size-xl-4);
}

h2 {
  font-size: var(--font-size-xl-3);
}

h3 {
  font-size: var(--font-size-xl-2);
}

title {
  font-size: var(--font-size-small);
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.header {
  font-size: var(--font-size-xl);
}

.sub-header {
  font-size: var(--font-size-base);
  font-weight: $font-weight-bold;
}

p,
a,
label {
  font-size: var(--font-size-base);
}

label {
  font-weight: 700;
}

.caption{
  font-size: var(--font-size-small);
}

h3 {
  margin-bottom: 1rem;
}

h4 {
  opacity: 0.4;
}

.bold {
  font-weight: 600;
}

.suppressed {
  opacity: $suppressed-opacity;
}