html {
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: $font-family-serif;
  font-size: rem(18);
  background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-family-sans-serif;
}

h1 {
  font-size: rem(30);
  font-weight: 600;
  letter-spacing: rem(2);
  line-height: (36/30);
  margin: 0;
}

h2 {
  font-size: rem(16);
  font-weight: normal;
  line-height: (30/16);
  margin: 0;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

:root {
  --primary: $brand-primary;
  --accent: $brand-accent;
  --primary-fg: $white;
  --secondary-fg: $white;
  --header-text: $black;
}

a {
  color: var(--primary, $brand-primary);
  text-decoration: none;
}

.primary {
  color: var(--brand-primary, $brand-primary);
}

.bg-primary {
  background-color: var(--brand-primary, $brand-primary);
}

.b--primary {
  border-color: var(--brand-primary, $brand-primary);
}

.accent {
  color: var(--brand-secondary, $brand-accent);
}

.bg-accent {
  background-color: var(--brand-secondary, $brand-accent);
}

.b--accent {
  border-color: var(--brand-secondary, $brand-accent);
}