:root {
  --text-base-size: 1rem;
  --text-base-line-height: 1.62;

  --fonts-primary: 'Roboto', sans-serif;

  @include breakpoint($regular) {
      // Edited this variable from 1.25rem.
      --text-base-size: 1rem;
  }
}

@mixin big_lead {
  font-size: 1.2rem;
  font-weight: 300;
  color: hsla(var(--base-hsl), .7);

  @include breakpoint($large) { 
    font-size: 1.7rem; 
    line-height: 1.6;
  }
}

@mixin h1 {
  font-size: 2rem;
  font-weight: 300;
  color: hsla(var(--base-hsl), 1);

  @include breakpoint($medium) { font-size: 1.7rem; }
  @include breakpoint($large) { font-size: 3rem; }
}

@mixin h2 {
  font-size: 1.3rem;
  font-weight: 400;
  color: hsla(var(--base-hsl), 1);

  @include breakpoint($medium) { font-size: 1.5rem; }
  @include breakpoint($large) { font-size: 2.2rem; }
}

@mixin h3 { 
  font-size: 1.1rem;
  font-weight: 400;
  color: hsla(var(--base-hsl), 1);
  line-height: 1.3;

  @include breakpoint($medium) { font-size: 1.2rem; }
  @include breakpoint($large) { font-size: 1.7rem; }
}

@mixin h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: hsla(var(--base-hsl), 1);
  
  @include breakpoint($medium) { font-size: 1.1rem; }
  @include breakpoint($large) { font-size: 1.3rem; }
}

@mixin h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: hsla(var(--base-hsl), 1);
  
  @include breakpoint($medium) { font-size: 1.1rem; }
  @include breakpoint($large) { font-size: 1.1rem; }
}

@mixin h6 {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.3;
  color: hsla(var(--base-hsl), 1);
  text-decoration: underline;
  
  @include breakpoint($medium) { font-size: 1rem; }
  @include breakpoint($large) { font-size: 1rem; }
}

@mixin text {
  font-size: 1.1rem;
  font-weight: 400;
  color: hsla(var(--base-hsl), 1);
  margin-bottom: 0;
  // & + & { margin-top: 1rem; }

  @include breakpoint($large) { font-size: 1.2rem; }
}

@mixin small_text {
  font-size: 0.75rem;
  font-weight: 400;
  color: hsla(var(--base-hsl), .8);
}

.h1 {
  @include h1;
  line-height: 1.3;
}

.intro {
  @include big-lead;
}

.h2 {
  @include h2;
  line-height: 1.3; 
}

.h3 {
  @include h3;
  line-height: 1.3; 
}

.h4 {
  @include h4;  
}

.h5 {
  @include h5;  
}

.h6 {
  @include h6;
}


// Slightly complicated styles for the paragraphs.
// We should simplify this.

p {
  line-height: 1.62;
  margin: 0 0 1.62ex 0;

  &.intro {
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 2ex;
    line-height: 1.5;
  }

  @include breakpoint($regular) {
    line-height: 1.65;
    margin-bottom: 1.65ex;

    &.intro {
        font-size: 1.6em;
        margin-bottom: 3ex;
        line-height: 1.37;
    }
  }
}

@mixin text {
  font-size: 1.1rem;
  font-weight: 400;
  color: hsla(var(--base-hsl), 1);
  margin-bottom: 0;

  @include breakpoint($large) { font-size: 1.2rem; }
}

.p {
  @include text;

  > a {
    font-weight: 400;
    color: var(--color-teal-dark);
  }
}