@use '../mixins' as *;

body {
  font-size: 1rem;
  color: #404040;
  @include font-sans;
  @include font-regular;
  @include leading-tight;

  // Font-smoothing
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  .theme {
    font-size: calc(0.85 * var(--theme-font-size-base));
    color: var(--theme-colour-text-primary);
  }
}

// SIZE RANGE REFERENCE //
// xxs: 12.64px
// xs: 14.22px
// sm: 16.00px → 17.60px
// base: 18.00px → 22.00px
// lg: 20.25px → 27.50px
// xl: 22.78px → 34.38px
// 2xl: 25.63px → 42.97px
// 3xl: 28.83px → 53.71px
// 4xl: 32.44px → 67.14px
// 5xl: 36.49px → 83.92px
// 6xl: 41.05px → 104.90px

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

h1 {
  @include h1;
}

h2 {
  @include h2;
}

h3 {
  @include h3;
}

h4,
h5,
h6 {
  @include h4;
}

//////////////
// Body text
//////////////

%body-type-block {
  display: block;
  @include body-text;
}

text {
  @include body-note;
}

p {
  @extend %body-type-block;
}

ol,
ul {
  @extend %body-type-block;
  padding-left: 2rem;
  ol,
  ul {
    margin-bottom: 0;
  }
}

a {
  @include body-link;
}

em {
  font-style: italic;
}

strong {
  @include font-bold;
}

pre,
code,
kbd {
  @include font-mono;
  @include text-sm;
  @include text-secondary;
  @include fmx-0;
  @include fmt-0;
  @include fmb-3;
}

kbd {
  background-color: $theme-colour-text-primary;
  color: $theme-colour-background;
  border-radius: 0.3rem;
  @include fpx-2;
  @include fpy-1;
}

figcaption {
  @include fmt-2;
  @include body-caption;
}

blockquote {
  @include fmx-0;
  @include fpl-3;
  @include fpy-3;
  @include fpr-1;
  border-left: 2px solid $theme-colour-brand-rules;
  @include fmy-3;
  p {
    @include font-body;
    @include text-lg;
    @include leading-tight;
    @include fmb-1;
    font-style: italic;
  }
  blockquote {
    @include fmb-0;
    @include fmt-3;
    border: 0;
    @include fpy-0;
    @include fpl-0;
    p {
      @include text-sm;
      @include font-note;
      @include fm-0;
      font-style: normal;
    }
  }
}