/*
 * Typography — Eggink Schilders
 * ----------------------------------------
 */

/* ----------------------------------------
 * BASIS
 * ---------------------------------------- */

body {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    var(--font-regular);
  line-height:    var(--leading-relaxed);
  color:          var(--color-text-body);
}

/* ----------------------------------------
 * KOPPEN
 * ---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  color:          var(--color-text-heading);
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-4);
}

h1 {
  font-size:    var(--text-5xl);
  font-weight:  var(--font-extrabold);
}

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

h3 {
  font-size:    var(--text-xl);
  font-weight:  var(--font-bold);
}

h4 {
  font-size:    var(--text-lg);
  font-weight:  var(--font-bold);
}

/* ----------------------------------------
 * BODYTEKST
 * ---------------------------------------- */

p {
  font-size:     var(--text-base);
  font-weight:   var(--font-regular);
  line-height:   var(--leading-relaxed);
  color:         var(--color-text-body);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * LINKS
 * ---------------------------------------- */

a {
  color:            var(--color-primary);
  text-decoration:  none;
  transition:       color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}