@utility button {
  @apply flex w-full justify-center items-center gap-2 px-6 py-4 bg-primary-500 text-base font-medium text-center leading-tight text-textPrimary-500 no-underline cursor-pointer hover:bg-primary-400 focus-visible:bg-primary-400 hover:text-textPrimary-400 focus-visible:text-textPrimary-400 focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:outline-none active:bg-primary-300 active:text-textPrimary-300 transition-all duration-75 ease-in-out;
}

@utility small {
  @apply px-3 sm:px-5 py-2;
}

@utility wide {
  @apply md:px-16;
}

@utility secondary {
  @apply bg-secondary-400 text-textSecondary-400 hover:bg-secondary-200 hover:text-textSecondary-200 active:bg-secondary-400 active:text-textSecondary-400 focus:outline-none transition-all duration-75 ease-in-out;
}

@utility tertiary {
  @apply bg-transparent border border-secondary-400 text-textSecondary-400;
}

@utility button-neutral-primary {
  @apply bg-[#1d2e4e] text-white hover:bg-[#1d2e4e] hover:text-white active:bg-[#1d2e4e] active:text-white focus:outline-none transition-all duration-75 ease-in-out;
}

@utility button-neutral-secondary {
  @apply bg-[#f9e92c] text-[#1d2e4e] hover:bg-[#f9e92c] hover:text-[#1d2e4e] active:bg-[#f9e92c] active:text-[#1d2e4e] focus:outline-none transition-all duration-75 ease-in-out;
}

@utility bg-neutral-primary {
  @apply bg-[#1d2e4e];
}

@utility bg-neutral-secondary {
  @apply bg-[#f9e92c];
}