@import url("/fonts/Usual/stylesheet.css");
@import "tailwindcss";

@theme {
  --breakpoint-2xl: 1440px;
}

@layer base {
  body {
    font-family: "Usual", sans-serif;
    color: #0d1922;
  }

  button {
    cursor: pointer;
    outline: none;
  }
}

@layer utilities {
  .text-headline-l {
    @apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
  }

  .text-subheadline-l {
    @apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
  }

  .text-subheadline-m {
    @apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
  }

  .text-subheadline-s {
    @apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] leading-[140%];
  }

  .text-m {
    @apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
  }

  .text-s {
    @apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-xs leading-[140%];
  }

  .text-caption-m {
    @apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,18px)] text-[clamp(12px,3.333vw,18px)] leading-[135%];
  }

  .text-caption-s {
    @apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
  }
}