@import 'vars';
@import 'queries';

/////////////////////////////
// HEADINGS
/////////////////////////////

@layer payload-default {
  %h1,
  %h2,
  %h3,
  %h4,
  %h5,
  %h6 {
    font-family: var(--font-body);
    font-weight: 500;
  }

  %h1 {
    margin: 0;
    font-size: base(1.6);
    line-height: base(1.8);

    @include small-break {
      letter-spacing: -0.5px;
      font-size: base(1.25);
    }
  }

  %h2 {
    margin: 0;
    font-size: base(1.3);
    line-height: base(1.6);

    @include small-break {
      font-size: base(0.85);
    }
  }

  %h3 {
    margin: 0;
    font-size: base(1);
    line-height: base(1.2);

    @include small-break {
      font-size: base(0.65);
      line-height: 1.25;
    }
  }

  %h4 {
    margin: 0;
    font-size: base(0.8);
    line-height: base(1);
    letter-spacing: -0.375px;
  }

  %h5 {
    margin: 0;
    font-size: base(0.65);
    line-height: base(0.8);
  }

  %h6 {
    margin: 0;
    font-size: base(0.6);
    line-height: base(0.8);
  }

  %small {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
  }

  /////////////////////////////
  // TYPE STYLES
  /////////////////////////////

  %large-body {
    font-size: base(0.6);
    line-height: base(1);
    letter-spacing: base(0.02);

    @include mid-break {
      font-size: base(0.7);
      line-height: base(1);
    }

    @include small-break {
      font-size: base(0.55);
      line-height: base(0.75);
    }
  }

  %body {
    font-size: $baseline-body-size;
    line-height: $baseline-px;
    font-weight: normal;
    font-family: var(--font-body);
  }

  %code {
    font-size: base(0.4);
    color: var(--theme-elevation-400);

    span {
      color: var(--theme-elevation-800);
    }
  }
}