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

@layer components {
  .typography-small {
    @apply text-[length:var(--typography-small-size)] font-[family-name:var(--typography-small-family)] leading-[var(--typography-small-line-height)] tracking-[var(--typography-small-letter-spacing)];
  }
  .typography-medium {
    @apply text-[length:var(--typography-medium-size)] font-[family-name:var(--typography-medium-family)] leading-[var(--typography-medium-line-height)] tracking-[var(--typography-medium-letter-spacing)];
  }
  .typography-large {
    @apply text-[length:var(--typography-large-size)] font-[family-name:var(--typography-large-family)] leading-[var(--typography-large-line-height)] tracking-[var(--typography-large-letter-spacing)];
  }
}