@layer components {
  /* Base typography styles */
  .display1, .display1-emphasized {
    @apply text-display1 font-secondary font-normal;
  }

  .display2, .display2-emphasized {
    @apply text-display2 font-secondary font-normal;
  }

  .title1, .title1-emphasized {
    @apply text-title1 font-primary font-normal;
  }

  .title2, .title2-emphasized {
    @apply text-title2 font-primary font-normal;
  }

  .title3, .title3-emphasized {
    @apply text-title3 font-primary font-normal;
  }

  .headline {
    @apply text-headline font-primary font-semibold;
  }

  .body1, .body1-emphasized {
    @apply text-body1 font-primary font-normal;
  }

  .body2, .body2-emphasized {
    @apply text-body2 font-primary font-normal;
  }

  .caption1, .caption1-emphasized, .caption1-uppercase {
    @apply text-caption1 font-primary font-normal;
  }

  .caption2, .caption2-emphasized, .caption2-uppercase {
    @apply text-caption2 font-primary font-normal;
  }

  /* Emphasized overrides */
  .display1-emphasized, .display2-emphasized {
    @apply font-bold;
  }

  .title1-emphasized, .title2-emphasized, .title3-emphasized, .caption1-emphasized, .caption1-uppercase {
    @apply font-semibold;
  }

  .body1-emphasized, .body2-emphasized, .caption2-emphasized, .caption2-uppercase {
    @apply font-medium;
  }

  /* Uppercase overrides */
  .caption1-uppercase, .caption2-uppercase {
    @apply uppercase tracking-[0.5px];
  }
}