@import url(/fonts/TTHovesProAll/stylesheet.css);

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "TTHovesPro", sans-serif;
  background-color: #ffffff;
  color: #141414;
}

@layer utilities {
  .title-l {
    @apply 2xl:text-[1.667vw] text-2xl leading-[120%] tracking-[-0.02em];
  }

  .title-m {
    @apply 2xl:text-[1.389vw] text-xl leading-[110%] tracking-[-0.02em];
  }

  .title-s {
    @apply 2xl:text-[1.111vw] text-base leading-[110%] tracking-[-0.02em];
  }

  .text-m {
    @apply 2xl:text-[1.111vw] text-base leading-[125%] tracking-[-0.02em];
  }

  .text-s {
    @apply 2xl:text-[0.972vw] text-sm leading-[115%] tracking-[-0.02em];
  }

  /* .text-xs {
    @apply text-xs leading-[110%] tracking-[-0.02em];
  } */

  .button-m {
    @apply 2xl:text-[0.972vw] text-sm leading-[115%] tracking-[-0.02em];
  }

  .button-s {
    @apply 2xl:text-[0.833vw] text-xs leading-[130%] tracking-[-0.02em];
  }

  .caption-m {
    @apply 2xl:text-[0.972vw] text-sm leading-[120%] tracking-[-0.02em];
  }

  .caption-s {
    @apply 2xl:text-[0.833vw] text-xs leading-[120%] tracking-[-0.02em];
  }

  .caption-xs {
    @apply 2xl:text-[0.729vw] text-[10px] leading-[110%] tracking-[-0.02em];
  }
}