// Visit https://www.figma.com/file/nJY45RLoow0IsmpMZ35aTR/DE blue-defaultSIGN-SYSTEM-NEW?type=design&node-id=619-53613&mode=design&t=tY2NLdArlQhUP9d3-0
// for more information on typography styles
// And see https://tailwindcss.com/docs/adding-custom-styles for more information on adding custom styles

@layer components {

  // Headings
  .heading-01 {
    @apply font-bold text-[2rem] leading-10;
  }

  .heading-02 {
    @apply font-bold text-2xl leading-8;
  }

  .heading-03 {
    @apply font-semibold text-xl leading-6;
  }

  .heading-04 {
    @apply font-semibold text-base leading-5;
  }

  .heading-05 {
    @apply font-semibold text-sm leading-5;
  }

  // Body
  .body-400 {
    @apply font-normal text-sm leading-5;
  }

  .body-500 {
    @apply font-medium text-sm leading-5;
  }

  .body-600 {
    @apply font-semibold text-sm leading-5
  }

  .body-s-400 {
    @apply font-normal text-sm leading-4;
  }

  .body-s-500 {
    @apply font-medium text-sm leading-4;
  }

  // Caption
  .caption-400 {
    @apply font-normal text-[0.625rem] leading-4;
  }

  .caption-500 {
    @apply font-medium text-[0.625rem] leading-4;
  }

  .caption-700 {
    @apply font-bold text-[0.625rem] leading-4;
  }

  // Form
  .label-400 {
    @apply font-normal text-sm leading-5;
  }

  .label-600 {
    @apply font-semibold text-sm leading-5;
  }

  .label-s-400 {
    @apply font-normal text-xs leading-4;
  }

  .label-s-700 {
    @apply font-bold text-xs leading-4;
  }

  .optional-i-700 {
    @apply font-bold italic text-sm leading-5;
  }

  .placeholder-300 {
    @apply font-light text-sm leading-5;
  }

  .description-400 {
    @apply font-normal text-xs leading-5;
  }

  //  Link
  .link-400 {
    @apply text-blue-500 font-normal text-sm leading-5;
  }

  .link-stroke-400 {
    @apply text-blue-500 font-normal text-sm leading-5;
  }

  .link-s-400 {
    @apply text-blue-500 font-normal text-sm leading-4;
  }

  .link-s-stroke-400 {
    @apply text-blue-500 font-normal text-sm leading-4;
  }

  .link-small-800 {
    @apply text-blue-500 font-bold text-sm leading-4;
  }

  //  Special Styles
  .display-80-700 {
    @apply font-bold text-[5rem] leading-[6.5rem];
  }

  .display-80-400 {
    @apply font-normal text-[5rem] leading-[6.5rem];
  }

  .display-60-700 {
    @apply font-bold text-[3.75rem] leading-[4.750rem];
  }

  .display-60-400 {
    @apply font-normal text-[3.75rem] leading-[4.750rem];
  }

  .display-48-700 {
    @apply font-bold text-[3rem] leading-[4rem];
  }

  .display-48-400 {
    @apply font-normal text-[3rem] leading-[4rem];
  }

  .numbers-60-700 {
    @apply font-bold text-[3.75rem] leading-[3.5rem];
  }

  .numbers-60-400 {
    @apply font-normal text-[3.75rem] leading-[3.5rem];
  }

  .numbers-40-700 {
    @apply font-bold text-[2.5rem] leading-[3.375rem];
  }

  .numbers-40-400 {
    @apply font-normal text-[2.5rem] leading-[3.375rem];
  }
}