/* TYPOGRAPHY */
/* - utility classes to add default typography styles */
/* ======= */

@layer utilities {
  /* ======= */
  /* body type */
  .type__body {
    font-family: var(--type__font-body-family);
    font-style: var(--type__font-body-style);
    font-weight: var(--type__font-body-weight);
    @apply underline-offset-1 leading-relaxed tracking-normal;
  }
  .type__body--bold {
    font-family: var(--type__font-body-family);
    @apply underline-offset-1 font-bold leading-relaxed tracking-normal;
  }
  .type__body--italic {
    font-family: var(--type__font-body-family);
    @apply underline-offset-1 italic leading-relaxed tracking-normal;
  }
  .type__body--bold-italic {
    font-family: var(--type__font-body-family);
    @apply underline-offset-1 italic font-bold leading-relaxed tracking-normal;
  }

  /* ======= */
  /* header type */
  .type__heading {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply underline-offset-2 tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-1 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-5xl underline-offset-2 text-4xl tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-2 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-4xl underline-offset-2 text-3xl tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-3 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-3xl underline-offset-2 text-2xl tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-4 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-2xl underline-offset-2 text-xl tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-5 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-xl underline-offset-2 text-lg tracking-normal;
    @apply leading-tight;
  }
  .type__heading--bold-6 {
    font-family: var(--type__font-header-family);
    font-style: var(--type__font-header-style);
    font-weight: var(--type__font-header-weight);
    @apply md:text-lg underline-offset-2 text-base tracking-normal;
    @apply leading-tight;
  }

  /* ======= */
  /* navigation type */
  .type__nav {
    font-family: var(--type__font-nav-family);
    font-style: var(--type__font-nav-style);
    font-weight: var(--type__font-nav-weight);
    @apply underline-offset-1 leading-normal tracking-wide;
  }

  /* ======= */
  /* changing font size */
  .type--smaller {
    @apply text-xs;
    * {
      @apply text-xs;
    }
  }
  .type--small {
    @apply md:text-sm text-xs;
    * {
      @apply md:text-sm text-xs;
    }
  }
  .type--base {
    @apply md:text-lg text-base;
    * {
      @apply md:text-lg text-base;
    }
  }
  .type--big {
    @apply md:text-2xl text-xl;
    * {
      @apply md:text-2xl text-xl;
    }
  }
}