/**
  * @file Typography
  *
  * This file contains all typography classes used in designs.
  * They should be used instead of individual font attributes.
  *
  * You can use them same as the normal Tailwind classes, e.g.: class="heading-1"
  */

@layer base {
  .heading-h1 {
    @apply text-26 not-italic font-600 leading-31 font-inter;
  }

  .heading-h2 {
    @apply text-21 not-italic font-600 leading-26 font-inter;
  }

  .heading-h3 {
    @apply text-17 not-italic font-600 leading-22 font-inter;
  }

  .heading-h4 {
    @apply text-12 not-italic font-700 leading-15 font-inter uppercase tracking-[.02em];
  }

  .heading-h5 {
    @apply text-14 not-italic font-700 leading-17 font-inter;
  }

  .heading-h1-medium-apax {
    @apply text-44 not-italic font-500 leading-40 font-apax;
  }

  .heading-h1-regular-apax {
    @apply text-44 not-italic font-400 leading-40 font-apax;
  }

  .heading-h2-medium-apax {
    @apply text-24 not-italic font-500 leading-28 font-apax;
  }

  .heading-h3-medium-apax {
    @apply text-16 not-italic font-500 leading-19 font-apax;
  }

  .heading-h4-medium-apax {
    @apply text-14 not-italic font-500 leading-20 font-apax;
  }

  .heading-h4-medium-uppercase-apax {
    @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
  }

  .heading-h5-medium-apax {
    @apply text-8 not-italic font-500 leading-10 font-apax;
  }

  .heading-h5-medium-uppercase-apax {
    @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
  }

  // Paragraph

  .paragraph-16-regular {
    @apply text-16 not-italic font-400 leading-24 font-inter;
  }

  .paragraph-16-semi-bold {
    @apply text-16 not-italic font-600 leading-24 font-inter;
  }

  .paragraph-14-regular {
    @apply text-14 not-italic font-400 leading-22 font-inter;
  }

  .paragraph-14-medium {
    @apply text-14 not-italic font-500 leading-22 font-inter;
  }

  .paragraph-14-semi-bold {
    @apply text-14 not-italic font-600 leading-22 font-inter;
  }

  .paragraph-12-regular {
    @apply text-12 not-italic font-400 leading-20 font-inter;
  }

  .paragraph-12-medium {
    @apply text-12 not-italic font-500 leading-20 font-inter;
  }

  .paragraph-12-semi-bold {
    @apply text-12 not-italic font-600 leading-20 font-inter;
  }

  // Currency

  .currency-10-semi-bold {
    @apply text-10 not-italic font-600 leading-12 font-inter;
  }

  .currency-10-bold-uppercase {
    @apply text-10 not-italic font-700 leading-12 font-inter uppercase;
  }

  .currency-14-semi-bold {
    @apply text-14 not-italic font-600 leading-17 font-inter;
  }

  // utility

  .link {
    @apply text-17 not-italic font-600 leading-22 font-inter;
  }

  .button-text {
    @apply text-17 not-italic font-600 leading-17 font-inter;
  }

  .caption {
    @apply text-13 not-italic font-400 leading-20 font-inter;
  }

  // Monospaced

  .monospaced-16-regular {
    @apply text-16 not-italic font-400 leading-22 font-mono;
  }

  .monospaced-16-bold {
    @apply text-16 not-italic font-700 leading-22 font-mono;
  }

  .monospaced-12-bold {
    @apply text-12 not-italic font-700 leading-14 font-mono;
  }

  .monospaced-10-bold {
    @apply text-10 not-italic font-700 leading-14 font-mono;
  }
}