/* Template Components */
@layer components {
  /* Template Pills */
  .template-pill {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium mx-1 align-middle cursor-default select-none bg-white border border-gray-100;
  }

  /* Text element with gradient */
  .template-pill__text {
    @apply text-transparent bg-clip-text font-bold;
    background-image: linear-gradient(135deg, #6366f1, #ec4899); /* indigo-500 to pink-500 */
  }
}